{"id":1530,"date":"2022-08-31T12:56:27","date_gmt":"2022-08-31T04:56:27","guid":{"rendered":"https:\/\/zhuxinyong.com\/?p=1530"},"modified":"2022-09-03T09:52:34","modified_gmt":"2022-09-03T01:52:34","slug":"javascript-shi-jue-huaeventloop","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1530","title":{"rendered":"JavaScript \u89c6\u89c9\u5316\uff1aEvent-Loop"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/09\/16619227227698.jpg\" alt=\"\" \/><\/p>\n<p>\u539f\u6587\u5730\u5740\uff1a<a href=\"https:\/\/dev.to\/lydiahallie\/javascript-visualized-event-loop-3dif\" target=\"_blank\" rel=\"noopener\">https:\/\/dev.to\/lydiahallie\/javascript-visualized-event-loop-3dif<\/a><\/p>\n<p>\u54e6\uff0c\u4e8b\u4ef6\u5faa\u73af\uff0c\u662f\u6bcf\u4e2a\u524d\u7aef\u5f00\u53d1\u8005\u90fd\u5fc5\u987b\u4ee5\u67d0\u79cd\u65b9\u5f0f\u5904\u7406\u7684\u4e8b\u60c5\u4e4b\u4e00\uff0c\u4f46\u662f\u4e00\u5f00\u59cb\u7406\u89e3\u8d77\u6765\u53ef\u80fd\u4f1a\u611f\u5230\u7591\u60d1\u3002\u6211\u662f\u4e00\u4e2a\u89c6\u89c9\u5b66\u4e60\u8005\uff0c\u6240\u4ee5\u6211\u60f3\u901a\u8fc7\u4f4e\u5206\u8fa8\u7387\u7684 GIF \u56fe\u7247\u4ee5\u89c6\u89c9\u65b9\u5f0f\u89e3\u91ca\u6765\u5c1d\u8bd5\u5e2e\u52a9\u4f60\uff0c\u56e0\u4e3a\u73b0\u5728\u90fd2019\u5e74\uff0cGIF \u56fe\u7247\u4e0d\u77e5\u4e3a\u4f55\u8fd8\u662f\u50cf\u7d20\u5316\u548c\u6a21\u7cca\u7684\u3002<\/p>\n<p>\u4f46\u662f\u5f00\u59cb\uff0c\u5e94\u8be5\u77e5\u9053\u4ec0\u4e48\u662f Event-Loop \u4ee5\u53ca\u4e3a\u4f55\u4f60\u5e94\u8be5\u5173\u6ce8\u5b83\uff1f<\/p>\n<p>JavaScript \u662f\u5355\u7ebf\u7a0b\uff1a\u540c\u4e00\u65f6\u523b\u53ea\u80fd\u6267\u884c\u4e00\u4e2a\u4efb\u52a1\u3002\u901a\u5e38\u60c5\u51b5\u4e0b\u6ca1\u4ec0\u4e48\u5927\u95ee\u9898\uff0c\u4f46\u662f\u73b0\u5728\u5047\u8bbe\u4f60\u5728\u6267\u884c\u4e00\u4e2a\u8017\u65f6 30s \u7684\u4efb\u52a1\u3002\u554a\uff0c\u5728\u90a3\u4e2a\u4efb\u52a1\u671f\u95f4\uff0c\u6211\u4eec\u9700\u8981\u7b49\u5f85 30s \u624d\u80fd\u6267\u884c\u5176\u4ed6\u4efb\u52a1\uff08\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cJavaScript \u6267\u884c\u5728\u6d4f\u89c8\u5668\u7684\u4e3b\u7ebf\u7a0b\u4e0a\uff0c\u6240\u4ee5\u6574\u4e2a UI \u4f1a\u88ab\u5361\u4f4f \uff09\u3002\ud83d\ude2d\u73b0\u5728\u90fd 2019 \u5e74\u4e86\uff0c\u6ca1\u6709\u4eba\u5e0c\u671b\u6162\u4e14\u6ca1\u6709\u54cd\u5e94\u7684\u7f51\u7ad9\u3002<\/p>\n<p>\u5e78\u8fd0\u7684\u662f\uff0c\u6d4f\u89c8\u5668\u7ed9\u4e86\u6211\u4eec\u4e00\u4e9b JavaScript \u5f15\u64ce\u81ea\u8eab\u4e0d\u63d0\u4f9b\u7684\u7279\u6027\uff1aWeb \u63a5\u53e3\u3002\u8fd9\u4e9b\u5305\u62ec DOM \u63a5\u53e3\u3001<code>setTimeout<\/code>\u3001HTTP \u8bf7\u6c42\u7b49\u7b49\u3002\u8fd9\u4e9b\u7279\u6027\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u521b\u5efa\u4e00\u4e9b\u5f02\u6b65\u3001\u975e\u963b\u585e\u884c\u4e3a \ud83d\ude80\u3002<\/p>\n<p>\u5f53\u6211\u4eec\u8c03\u7528\u4e00\u4e2a\u65b9\u6cd5\u65f6\uff0c\u5b83\u4f1a\u88ab\u52a0\u5165\u5230\u4e00\u4e2a\u53eb\u505a\u8c03\u7528\u6808\u7684\u91cc\u9762\u3002\u8c03\u7528\u6808\u662f JavaScript \u5f15\u64ce\u7684\u4e00\u90e8\u5206\uff0c\u8fd9\u4e0e\u6d4f\u89c8\u5668\u65e0\u5173\u3002\u5b83\u662f\u4e00\u4e2a\u6808\u610f\u5473\u7740\u662f\u5148\u8fdb\u540e\u51fa\uff08\u60f3\u8d77\u4e86\u4e00\u5806\u714e\u997c\uff09\u3002\u5f53\u4e00\u4e2a\u51fd\u6570\u8fd4\u56de\u503c\u540e\uff0c\u5b83\u5c31\u4f1a\u88ab\u4ece\u6808\u9876\u629b\u51fa\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/09\/gid1.6.gif\" alt=\"gid1.6\" \/><\/p>\n<p><code>respond<\/code> \u51fd\u6570\u8fd4\u56de\u4e00\u4e2a <code>setTimeout<\/code> \u51fd\u6570\uff0c<code>setTimeout<\/code> \u662f Web \u63a5\u53e3\u63d0\u4f9b\u7ed9\u6211\u4eec\u7684\uff1a\u5b83\u4f7f\u6211\u4eec\u80fd\u5728\u4e0d\u963b\u585e\u4e3b\u7ebf\u7a0b\u7684\u60c5\u51b5\u4e0b\u5ef6\u8fdf\u4e00\u4e9b\u4efb\u52a1\u3002\u6211\u4eec\u4f20\u9012\u7ed9 <code>setTimeout<\/code> \u7684\u7bad\u5934\u51fd\u6570 <code>()=&gt;{return 'Hey'}<\/code> \u88ab\u52a0\u8f7d\u5230\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684 Web \u63a5\u53e3\u4e2d\u3002\u540c\u65f6\uff0c<code>setTimeout<\/code> \u548c <code>respond<\/code> \u51fd\u6570\u4ece\u6808\u4e2d\u5f39\u51fa\uff0c\u5b83\u4eec\u90fd\u8fd4\u56de\u4e86\u5404\u81ea\u7684\u503c\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/09\/gif2.1.gif\" alt=\"gif2.1\" \/><\/p>\n<p>\u5728 Web \u63a5\u53e3\u4e2d\uff0c\u8ba1\u65f6\u5668\u7684\u5c06\u8981\u8fd0\u884c\u7684\u65f6\u95f4\u4e0e\u6211\u4eec\u4f20\u9012\u7ed9\u5b83\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e00\u6837\u957f\uff0c\u5373 1000ms\u3002\u56de\u8c03\u5e76\u4e0d\u662f\u76f4\u63a5\u6dfb\u52a0\u5230\u8c03\u7528\u6808\u4e2d\u800c\u662f\u88ab\u52a0\u5230\u4e00\u4e2a\u53eb\u505a\u961f\u5217\u7684\u4e1c\u897f\u4e2d\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/09\/gif3.1.gif\" alt=\"gif3.1\" \/><\/p>\n<p>\u8fd9\u53ef\u80fd\u662f\u4ee4\u4eba\u8ff7\u60d1\u7684\u90e8\u5206\uff1a1000ms \u540e\u5b83\u4e0d\u662f\u88ab\u6dfb\u52a0\u5230\u8c03\u7528\u6808\u4e2d\uff0c\u800c\u662f\u88ab\u6dfb\u52a0\u5230\u961f\u5217\u4e2d\u3002\u7531\u4e8e\u8fd9\u662f\u4e00\u4e2a\u961f\u5217\uff0c\u8fd9\u4e2a\u51fd\u6570\u5fc5\u987b\u7b49\u5f85\u8f6e\u5230\u5b83\u65f6\u624d\u80fd\u6267\u884c\u3002<\/p>\n<p>\u73b0\u5728\u6211\u4eec\u90fd\u5728\u7b49\u5f85 Event loop \u6267\u884c\u5b83\u7684\u4efb\u52a1\u6240\u9700\u65f6\u95f4\uff1a\u8fde\u63a5\u961f\u5217\u4e0e\u8c03\u7528\u6808\uff01\u82e5\u8c03\u7528\u6808\u7a7a\u4e86\uff0c\u610f\u5473\u7740\u4e4b\u524d\u6240\u6709\u8c03\u7528\u7684\u51fd\u6570\u5df2\u7ecf\u8fd4\u56de\u5b83\u4eec\u5404\u81ea\u7684\u503c\u800c\u4e14\u4ece\u6808\u4e2d\u88ab\u629b\u51fa\uff0c\u540c\u65f6\u961f\u5217\u4e2d\u7684\u7b2c\u4e00\u9879\u4f1a\u88ab\u52a0\u5230\u8c03\u7528\u6808\u4e2d\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u6ca1\u6709\u5176\u5b83\u7684\u51fd\u6570\u8c03\u7528\uff0c\u610f\u5473\u7740\u5f53\u56de\u8c03\u51fd\u6570\u79f0\u4e3a\u961f\u5217\u4e2d\u7684\u7b2c\u4e00\u9879\u65f6\u8c03\u7528\u6808\u662f\u7a7a\u7684\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/09\/gif4.gif\" alt=\"gif4\" \/><\/p>\n<p>\u56de\u8c03\u51fd\u6570\u88ab\u6dfb\u52a0\u5230\u8c03\u7528\u6808\u4e2d\uff0c\u6267\u884c\u4ee5\u53ca\u8fd4\u56de\u503c\uff0c\u6700\u540e\u4ece\u6808\u4e2d\u629b\u51fa\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/09\/gif5.gif\" alt=\"gif5\" \/><\/p>\n<p>\u8bfb\u6587\u7ae0\u662f\u5f88\u6709\u8da3\uff0c\u4f46\u4f60\u53ea\u6709\u901a\u8fc7\u53cd\u590d\u5b9e\u9645\u64cd\u4f5c\u624d\u80fd\u5b8c\u5168\u9002\u5e94\u3002\u8bd5\u7740\u60f3\u4e00\u4e0b\uff0c\u5982\u679c\u6211\u4eec\u8fd0\u884c\u4e0b\u9762\u7684\u7a0b\u5e8f\uff0c\u63a7\u5236\u53f0\u4e2d\u4f1a\u6253\u5370\u4ec0\u4e48\u8bb0\u5f55\u3002<\/p>\n<pre class=\"line-numbers\"><code class=\"language-plain_text\">const foo = () =&gt; console.log(&quot;First&quot;);\nconst bar = () =&gt; setTimeout(() =&gt; console.log(&quot;Second&quot;), 500);\nconst baz = () =&gt; console.log(&quot;Third&quot;);\n\nbar();\nfoo();\nbaz();\n<\/code><\/pre>\n<p>\u660e\u767d\u4e86\u5417\uff1f\u8ba9\u6211\u4eec\u5feb\u901f\u770b\u4e0b\u5f53\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u4e0a\u9762\u7684\u4ee3\u7801\u53d1\u751f\u4e86\u4ec0\u4e48\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/09\/gif14.1.gif\" alt=\"gif14.1\" \/><\/p>\n<ol>\n<li>\u6211\u4eec\u8c03\u7528 <code>bar<\/code> \u51fd\u6570\uff0c<code>bar<\/code> \u8fd4\u56de\u4e00\u4e2a <code>setTimeout<\/code> \u51fd\u6570\u3002<\/li>\n<li>\u6211\u4eec\u4f20\u9012\u7ed9 <code>setTimeout<\/code> \u7684\u51fd\u6570\u88ab\u6dfb\u52a0\u5230\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684 Web \u63a5\u53e3\u4e2d\uff0c<code>setTimeout<\/code> \u548c <code>bar<\/code> \u51fd\u6570\u4ece\u6808\u4e2d\u629b\u51fa\u3002<\/li>\n<li>\u8ba1\u65f6\u5668\u8fd0\u884c\u7684\u540c\u65f6\uff0c\u8c03\u7528 <code>foo<\/code> \u51fd\u6570\u5e76\u6253\u5370\u51fa <code>First<\/code>\uff0c\u5e76\u8fd4\u56de undefined \uff0c\u8c03\u7528 <code>baz<\/code> \u51fd\u6570\u3002\u4ee5\u53ca\u56de\u8c03\u51fd\u6570\u6dfb\u52a0\u5230\u961f\u5217\u4e2d\u3002<\/li>\n<li><code>baz<\/code> \u6253\u5370 <code>Third<\/code>\uff0c\u5728 <code>baz<\/code> \u8fd4\u56de\u540e Event loop \u7684\u8c03\u7528\u6808\u662f\u7a7a\u7684\uff0c\u63a5\u7740\u56de\u8c03\u51fd\u6570\u6dfb\u52a0\u5230\u8c03\u7528\u6808\u4e2d\u3002<\/li>\n<li>\u56de\u8c03\u51fd\u6570\u6253\u5370\u51fa <code>Second<\/code>\u3002<\/li>\n<\/ol>\n<p>\u5e0c\u671b\u8fd9\u80fd\u8ba9\u4f60\u5bf9 Event loop \u66f4\u9002\u5e94\u4e00\u4e9b\u3002\u4e0d\u8981\u62c5\u5fc3\uff0c\u5982\u679c\u5b83\u4ecd\u7136\u4ee4\u4eba\u56f0\u60d1\uff0c\u6700\u91cd\u8981\u7684\u662f\u4e86\u89e3\u67d0\u4e9b\u9519\u8bef\/\u884c\u4e3a\u6765\u81ea\u54ea\u91cc\uff0c\u4ee5\u4fbf\u6709\u6548\u7684\u641c\u7d22\u6b63\u786e\u672f\u8bed\uff0c\u5e76\u6700\u7ec8\u8fdb\u5165\u6b63\u786e\u7684 StackOverflow \u9875\u9762\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/lydiahallie\/javascript-visuali&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[216],"class_list":["post-1530","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-event-loop"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1530"}],"version-history":[{"count":1,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1530\/revisions"}],"predecessor-version":[{"id":1531,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1530\/revisions\/1531"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}