{"id":563,"date":"2025-12-06T19:04:42","date_gmt":"2025-12-06T11:04:42","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=563"},"modified":"2025-12-06T19:04:42","modified_gmt":"2025-12-06T11:04:42","slug":"%e5%89%8d%e7%ab%af%e9%98%b2%e6%ad%a2%e8%a1%a8%e5%8d%95%e9%87%8d%e5%a4%8d%e6%8f%90%e4%ba%a4%e7%9a%84%e5%a4%9a%e7%a7%8d%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/%e5%89%8d%e7%ab%af%e9%98%b2%e6%ad%a2%e8%a1%a8%e5%8d%95%e9%87%8d%e5%a4%8d%e6%8f%90%e4%ba%a4%e7%9a%84%e5%a4%9a%e7%a7%8d%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88\/","title":{"rendered":"\u524d\u7aef\u9632\u6b62\u8868\u5355\u91cd\u590d\u63d0\u4ea4\u7684\u591a\u79cd\u89e3\u51b3\u65b9\u6848"},"content":{"rendered":"\n<p>\u597d\u7684\uff0c\u6211\u5e2e\u4f60\u6574\u7406\u4e00\u4efd <strong>\u524d\u7aef\u9632\u6b62\u8868\u5355\u91cd\u590d\u63d0\u4ea4\u7684\u591a\u79cd\u89e3\u51b3\u65b9\u6848\uff082025 \u6700\u65b0\u7248\uff09<\/strong>\uff0c\u5305\u542b JS \u5c42\u9762\u3001Vue\/React \u6846\u67b6\u5b9e\u73b0\uff0c\u4ee5\u53ca\u5e38\u89c1\u573a\u666f\u5b9e\u8df5\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\ude80 \u524d\u7aef\u9632\u6b62\u8868\u5355\u91cd\u590d\u63d0\u4ea4\u89e3\u51b3\u65b9\u6848<\/h1>\n\n\n\n<p>\u8868\u5355\u91cd\u590d\u63d0\u4ea4\u4f1a\u5bfc\u81f4\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u91cd\u590d\u8ba2\u5355<\/li>\n\n\n\n<li>\u91cd\u590d\u652f\u4ed8<\/li>\n\n\n\n<li>\u6570\u636e\u5e93\u5197\u4f59\u8bb0\u5f55<\/li>\n<\/ul>\n\n\n\n<p>\u9632\u6b62\u91cd\u590d\u63d0\u4ea4\u7684\u65b9\u6848\u4e3b\u8981\u5206\u4e3a <strong>\u524d\u7aef\u63a7\u5236<\/strong> \u548c <strong>\u524d\u540e\u7aef\u7ed3\u5408\u63a7\u5236<\/strong>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u7981\u7528\u6309\u94ae\u6cd5\uff08\u6700\u5e38\u7528\uff09<\/h2>\n\n\n\n<p>\u63d0\u4ea4\u8868\u5355\u65f6\uff0c\u7acb\u5373\u7981\u7528\u63d0\u4ea4\u6309\u94ae\uff0c\u907f\u514d\u7528\u6237\u8fde\u7eed\u70b9\u51fb\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;form id=&quot;myForm&quot;&gt;\n  &amp;lt;input type=&quot;text&quot; name=&quot;name&quot; required \/&gt;\n  &amp;lt;button id=&quot;submitBtn&quot; type=&quot;submit&quot;&gt;\u63d0\u4ea4&amp;lt;\/button&gt;\n&amp;lt;\/form&gt;\n\n&amp;lt;script&gt;\nconst form = document.getElementById(&quot;myForm&quot;);\nconst btn = document.getElementById(&quot;submitBtn&quot;);\n\nform.addEventListener(&quot;submit&quot;, function(e) {\n  e.preventDefault(); \/\/ \u963b\u6b62\u9ed8\u8ba4\u63d0\u4ea4\n  btn.disabled = true; \/\/ \u7981\u7528\u6309\u94ae\n  \/\/ \u6a21\u62df\u5f02\u6b65\u8bf7\u6c42\n  setTimeout(() =&gt; {\n    alert(&quot;\u8868\u5355\u63d0\u4ea4\u6210\u529f&quot;);\n    btn.disabled = false; \/\/ \u53ef\u9009\uff1a\u8bf7\u6c42\u5b8c\u6210\u540e\u6062\u590d\u6309\u94ae\n  }, 2000);\n});\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u4f18\u70b9\uff1a\u7b80\u5355\u76f4\u89c2<br>\u26a0\ufe0f \u7f3a\u70b9\uff1a\u7528\u6237\u5feb\u901f\u5237\u65b0\u4ecd\u53ef\u80fd\u91cd\u590d\u63d0\u4ea4<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 \u524d\u7aef\u9632\u6296\uff08Debounce\uff09\u6cd5<\/h2>\n\n\n\n<p>\u5229\u7528\u9632\u6296\u51fd\u6570\uff0c\u9650\u5236\u77ed\u65f6\u95f4\u5185\u91cd\u590d\u89e6\u53d1\u63d0\u4ea4\u4e8b\u4ef6\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction debounce(fn, delay = 1000) {\n  let timer = null;\n  return function(...args) {\n    if(timer) return;\n    timer = setTimeout(() =&gt; {\n      fn.apply(this, args);\n      timer = null;\n    }, delay);\n  }\n}\n\nconst submitForm = () =&gt; {\n  alert(&quot;\u8868\u5355\u5df2\u63d0\u4ea4&quot;);\n};\n\ndocument.getElementById(&quot;submitBtn&quot;).addEventListener(\n  &quot;click&quot;,\n  debounce(submitForm, 1000)\n);\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u9002\u5408\u591a\u6b21\u70b9\u51fb\u6309\u94ae\u573a\u666f<br>\u26a0\ufe0f \u4e0d\u9002\u5408\u957f\u65f6\u95f4\u8bf7\u6c42\u63a7\u5236<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 \u524d\u7aef\u8282\u6d41\uff08Throttle\uff09\u6cd5<\/h2>\n\n\n\n<p>\u4fdd\u8bc1\u4e00\u5b9a\u65f6\u95f4\u5185\u53ea\u89e6\u53d1\u4e00\u6b21\u63d0\u4ea4\uff0c\u9002\u5408\u8fde\u7eed\u70b9\u51fb\u573a\u666f\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction throttle(fn, limit = 2000) {\n  let lastCall = 0;\n  return function(...args) {\n    const now = Date.now();\n    if(now - lastCall &gt;= limit) {\n      lastCall = now;\n      fn.apply(this, args);\n    }\n  }\n}\n\ndocument.getElementById(&quot;submitBtn&quot;).addEventListener(\n  &quot;click&quot;,\n  throttle(() =&gt; alert(&quot;\u8868\u5355\u63d0\u4ea4\u6210\u529f&quot;), 2000)\n);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 Token\/Flag \u63a7\u5236\u6cd5\uff08\u6700\u5b89\u5168\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u2460 \u524d\u7aef\u751f\u6210\u552f\u4e00\u63d0\u4ea4\u6807\u8bc6\uff08UUID\/\u65f6\u95f4\u6233\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nlet isSubmitting = false;\n\nform.addEventListener(&quot;submit&quot;, async (e) =&gt; {\n  e.preventDefault();\n  if(isSubmitting) return; \/\/ \u5df2\u63d0\u4ea4\uff0c\u76f4\u63a5\u8fd4\u56de\n  isSubmitting = true;\n\n  \/\/ \u6a21\u62df\u5f02\u6b65\u63d0\u4ea4\n  await new Promise(resolve =&gt; setTimeout(resolve, 2000));\n  alert(&quot;\u8868\u5355\u63d0\u4ea4\u6210\u529f&quot;);\n  isSubmitting = false; \/\/ \u8bf7\u6c42\u5b8c\u6210\u540e\u91cd\u7f6e\n});\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u4f18\u70b9\uff1a\u53ef\u9632\u6b62\u5feb\u901f\u91cd\u590d\u70b9\u51fb\uff0c\u5b89\u5168\u53ef\u9760<br>\u26a0\ufe0f \u4e0e\u540e\u7aef\u7ed3\u5408\u53ef\u9632\u6b62\u5237\u65b0\u91cd\u590d\u63d0\u4ea4<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2461 \u540e\u7aef\u751f\u6210\u4e00\u6b21\u6027 token\uff08\u63a8\u8350\u4f01\u4e1a\u7ea7\u65b9\u6848\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u524d\u7aef\u4ece\u63a5\u53e3\u83b7\u53d6 <code>csrfToken<\/code> \u6216 <code>submitToken<\/code><\/li>\n\n\n\n<li>\u63d0\u4ea4\u8868\u5355\u65f6\u5e26\u4e0a token<\/li>\n\n\n\n<li>\u540e\u7aef\u9a8c\u8bc1 token \u662f\u5426\u5df2\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u793a\u4f8b\u6d41\u7a0b\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\u524d\u7aef\u8bf7\u6c42 token --&gt; \u7528\u6237\u586b\u5199\u8868\u5355 --&gt; \u63d0\u4ea4\u8868\u5355 + token --&gt; \u540e\u7aef\u9a8c\u8bc1 token --&gt; token \u4f5c\u5e9f\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u4f18\u70b9\uff1a\u5b89\u5168\u6027\u9ad8\uff0c\u53ef\u9632\u6b62\u5237\u65b0\u3001F5 \u548c\u91cd\u590d\u63d0\u4ea4<br>\u26a0\ufe0f \u7f3a\u70b9\uff1a\u9700\u540e\u7aef\u914d\u5408<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5\ufe0f\u20e3 \u4f7f\u7528 Vue3 \u6216 React \u6846\u67b6\u5b9e\u73b0\u9632\u91cd\u590d\u63d0\u4ea4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Vue3 + Flag \u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;form @submit.prevent=&quot;handleSubmit&quot;&gt;\n    &amp;lt;input v-model=&quot;name&quot; required \/&gt;\n    &amp;lt;button :disabled=&quot;isSubmitting&quot;&gt;\u63d0\u4ea4&amp;lt;\/button&gt;\n  &amp;lt;\/form&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nconst name = ref(&#039;&#039;)\nconst isSubmitting = ref(false)\n\nconst handleSubmit = async () =&gt; {\n  if(isSubmitting.value) return\n  isSubmitting.value = true\n  await new Promise(resolve =&gt; setTimeout(resolve, 2000)) \/\/ \u6a21\u62df\u8bf7\u6c42\n  alert(`\u63d0\u4ea4\u6210\u529f: ${name.value}`)\n  isSubmitting.value = false\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">React + Flag \u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { useState } from &#039;react&#039;;\n\nfunction MyForm() {\n  const &#x5B;isSubmitting, setIsSubmitting] = useState(false);\n  const &#x5B;name, setName] = useState(&#039;&#039;);\n\n  const handleSubmit = async (e) =&gt; {\n    e.preventDefault();\n    if(isSubmitting) return;\n    setIsSubmitting(true);\n    await new Promise(resolve =&gt; setTimeout(resolve, 2000));\n    alert(`\u63d0\u4ea4\u6210\u529f: ${name}`);\n    setIsSubmitting(false);\n  }\n\n  return (\n    &amp;lt;form onSubmit={handleSubmit}&gt;\n      &amp;lt;input value={name} onChange={e =&gt; setName(e.target.value)} required \/&gt;\n      &amp;lt;button type=&quot;submit&quot; disabled={isSubmitting}&gt;\u63d0\u4ea4&amp;lt;\/button&gt;\n    &amp;lt;\/form&gt;\n  );\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6\ufe0f\u20e3 \u603b\u7ed3\u4e0e\u63a8\u8350\u65b9\u6848<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u65b9\u6cd5<\/th><th>\u7279\u70b9<\/th><th>\u573a\u666f<\/th><\/tr><\/thead><tbody><tr><td>\u7981\u7528\u6309\u94ae<\/td><td>\u7b80\u5355\u76f4\u89c2<\/td><td>\u5c0f\u578b\u9879\u76ee\u3001\u8868\u5355\u70b9\u51fb\u63a7\u5236<\/td><\/tr><tr><td>\u9632\u6296<\/td><td>\u9650\u5236\u77ed\u65f6\u95f4\u91cd\u590d\u89e6\u53d1<\/td><td>\u8fde\u7eed\u70b9\u51fb\u6309\u94ae<\/td><\/tr><tr><td>\u8282\u6d41<\/td><td>\u9650\u5236\u4e00\u5b9a\u65f6\u95f4\u63d0\u4ea4<\/td><td>\u9ad8\u9891\u70b9\u51fb\u6309\u94ae<\/td><\/tr><tr><td>\u524d\u7aef Flag\/Token<\/td><td>\u9ad8\u5b89\u5168\uff0c\u63a7\u5236\u63d0\u4ea4\u72b6\u6001<\/td><td>\u4f01\u4e1a\u7ea7\u524d\u7aef\u9632\u91cd\u590d\u63d0\u4ea4<\/td><\/tr><tr><td>\u540e\u7aef Token<\/td><td>\u6700\u5b89\u5168\uff0c\u9632\u5237\u65b0\/\u91cd\u590d\u63d0\u4ea4<\/td><td>\u7535\u5546\u3001\u652f\u4ed8\u7cfb\u7edf\u5fc5\u7528<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u2705 \u63a8\u8350\u7ec4\u5408\u65b9\u6848\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u524d\u7aef Flag + \u540e\u7aef\u4e00\u6b21\u6027 Token<\/strong> \u2192 \u6700\u5b89\u5168<\/li>\n\n\n\n<li><strong>\u7b80\u5355\u573a\u666f<\/strong>\uff1a\u7981\u7528\u6309\u94ae\u6216\u9632\u6296\u5373\u53ef<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\u7684\uff0c\u6211\u5e2e\u4f60\u6574\u7406\u4e00\u4efd \u524d\u7aef\u9632\u6b62\u8868\u5355\u91cd\u590d\u63d0\u4ea4\u7684\u591a\u79cd\u89e3\u51b3\u65b9\u6848\uff082025 \u6700\u65b0\u7248\uff09\uff0c\u5305&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/%e5%89%8d%e7%ab%af%e9%98%b2%e6%ad%a2%e8%a1%a8%e5%8d%95%e9%87%8d%e5%a4%8d%e6%8f%90%e4%ba%a4%e7%9a%84%e5%a4%9a%e7%a7%8d%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-563","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=563"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/563\/revisions"}],"predecessor-version":[{"id":564,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/563\/revisions\/564"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}