1 line
22 KiB
JavaScript
1 line
22 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[9591],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return k}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),m=p(n),k=a,d=m["".concat(s,".").concat(k)]||m[k]||u[k]||l;return n?r.createElement(d,o(o({ref:t},c),{},{components:n})):r.createElement(d,o({ref:t},c))}));function k(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,o[1]=i;for(var p=2;p<l;p++)o[p]=n[p];return r.createElement.apply(null,o)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7345:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return i},contentTitle:function(){return s},metadata:function(){return p},toc:function(){return c},default:function(){return m}});var r=n(7462),a=n(3366),l=(n(7294),n(3905)),o=["components"],i={sidebar_label:"\u57fa\u7840\uff1aJavaScript \u5f02\u6b65\u7f16\u7a0b",sidebar_position:6},s="JavaScript \u5f02\u6b65\u7f16\u7a0b",p={unversionedId:"book3/js-async",id:"book3/js-async",isDocsHomePage:!1,title:"JavaScript \u5f02\u6b65\u7f16\u7a0b",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book3/js-async.md",sourceDirName:"book3",slug:"/book3/js-async",permalink:"/awesome-interview/book3/js-async",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_label:"\u57fa\u7840\uff1aJavaScript \u5f02\u6b65\u7f16\u7a0b",sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"\u6846\u67b6\uff1a\u5e38\u89c1\u6846\u67b6\u7684 Diff \u7b97\u6cd5",permalink:"/awesome-interview/book3/frame-diff"},next:{title:"\u57fa\u7840\uff1aTypeScript \u4e2d\u7684 Interface \u548c Type Alias",permalink:"/awesome-interview/book3/js-ts-interface-type"}},c=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u5f02\u6b65\u56de\u8c03",id:"1-\u5f02\u6b65\u56de\u8c03",children:[]},{value:"2. \u5b9a\u65f6\u5668\uff1asetTimeout/setInterval/requestAnimationFrame",id:"2-\u5b9a\u65f6\u5668settimeoutsetintervalrequestanimationframe",children:[]},{value:"3. \u53d1\u5e03/\u8ba2\u9605\u6a21\u5f0f\uff08publish-subscribe pattern\uff09",id:"3-\u53d1\u5e03\u8ba2\u9605\u6a21\u5f0fpublish-subscribe-pattern",children:[]},{value:"4. Promise",id:"4-promise",children:[]},{value:"5. \u751f\u6210\u5668 Generator",id:"5-\u751f\u6210\u5668-generator",children:[]},{value:"6. aysnc/await",id:"6-aysncawait",children:[]},{value:"7. Web Worker",id:"7-web-worker",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],u={toc:c};function m(e){var t=e.components,n=(0,a.Z)(e,o);return(0,l.kt)("wrapper",(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"javascript-\u5f02\u6b65\u7f16\u7a0b"},"JavaScript \u5f02\u6b65\u7f16\u7a0b"),(0,l.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"JavaScript \u5f02\u6b65\u7f16\u7a0b\u65b9\u6848\u6709\u54ea\u4e9b"),(0,l.kt)("li",{parentName:"ul"},"JavaScript \u5f02\u6b65\u7f16\u7a0b\u65b9\u6848\u5404\u6709\u4ec0\u4e48\u4f18\u7f3a\u70b9")),(0,l.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"\u963b\u585e")," ",(0,l.kt)("inlineCode",{parentName:"p"},"\u4e8b\u4ef6\u5faa\u73af")," ",(0,l.kt)("inlineCode",{parentName:"p"},"\u56de\u8c03\u51fd\u6570")),(0,l.kt)("p",null,"JavaScript \u662f\u4e00\u79cd\u540c\u6b65\u7684\u3001\u963b\u585e\u7684\u3001\u5355\u7ebf\u7a0b\u7684\u8bed\u8a00\uff0c\u4e00\u6b21\u53ea\u80fd\u6267\u884c\u4e00\u4e2a\u4efb\u52a1\u3002\u4f46\u6d4f\u89c8\u5668\u5b9a\u4e49\u4e86\u975e\u540c\u6b65\u7684 Web APIs\uff0c\u5c06\u56de\u8c03\u51fd\u6570\u63d2\u5165\u5230",(0,l.kt)("a",{parentName:"p",href:"/awesome-interview/book3/browser-event-loop"},"\u4e8b\u4ef6\u5faa\u73af"),"\uff0c\u5b9e\u73b0\u5f02\u6b65\u4efb\u52a1\u7684\u975e\u963b\u585e\u6267\u884c\u3002\u5e38\u89c1\u7684\u5f02\u6b65\u65b9\u6848\u6709\u5f02\u6b65\u56de\u8c03\u3001\u5b9a\u65f6\u5668\u3001\u53d1\u5e03/\u8ba2\u9605\u6a21\u5f0f\u3001Promise\u3001\u751f\u6210\u5668 Generator\u3001async/await \u4ee5\u53ca Web Worker\u3002"),(0,l.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,l.kt)("h3",{id:"1-\u5f02\u6b65\u56de\u8c03"},"1. \u5f02\u6b65\u56de\u8c03"),(0,l.kt)("p",null,"\u5f02\u6b65\u56de\u8c03\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9\u5728\u540e\u53f0\u6267\u884c\u7684\u5176\u4ed6\u51fd\u6570\u3002\u5f53\u540e\u53f0\u8fd0\u884c\u7684\u4ee3\u7801\u7ed3\u675f\uff0c\u5c31\u8c03\u7528\u56de\u8c03\u51fd\u6570\uff0c\u901a\u77e5\u5de5\u4f5c\u5df2\u7ecf\u5b8c\u6210\u3002\u5177\u4f53\u793a\u4f8b\u5982\u4e0b\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},'// \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u76d1\u542c\u7684\u4e8b\u4ef6\u7c7b\u578b\uff0c\u7b2c\u4e8c\u4e2a\u5c31\u662f\u4e8b\u4ef6\u53d1\u751f\u65f6\u8c03\u7528\u7684\u56de\u8c03\u51fd\u6570\u3002\nbtn.addEventListener("click", () => {\n console.log("You clicked me!");\n\n const pElem = document.createElement("p");\n pElem.textContent = "hello, hzfe.";\n document.body.appendChild(pElem);\n});\n')),(0,l.kt)("p",null,"\u5f02\u6b65\u56de\u8c03\u662f\u7f16\u5199\u548c\u5904\u7406 JavaScript \u5f02\u6b65\u903b\u8f91\u7684\u6700\u5e38\u7528\u65b9\u5f0f\uff0c\u4e5f\u662f\u6700\u57fa\u7840\u7684\u5f02\u6b65\u6a21\u5f0f\u3002\u4f46\u662f\u968f\u7740 JavaScript \u7684\u53d1\u5c55\uff0c\u5f02\u6b65\u56de\u8c03\u7684\u95ee\u9898\u4e5f\u4e0d\u5bb9\u5ffd\u89c6\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u56de\u8c03\u8868\u8fbe\u5f02\u6b65\u6d41\u7a0b\u7684\u65b9\u5f0f\u662f\u975e\u7ebf\u6027\u7684\uff0c\u975e\u987a\u5e8f\u7684\uff0c\u7406\u89e3\u6210\u672c\u8f83\u9ad8\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u56de\u8c03\u4f1a\u53d7\u5230\u63a7\u5236\u53cd\u8f6c\u7684\u5f71\u54cd\u3002\u56e0\u4e3a\u56de\u8c03\u7684\u63a7\u5236\u6743\u5728\u7b2c\u4e09\u65b9\uff08\u5982 Ajax\uff09\uff0c\u7531\u7b2c\u4e09\u65b9\u6765\u8c03\u7528\u56de\u8c03\u51fd\u6570\uff0c\u65e0\u6cd5\u786e\u5b9a\u8c03\u7528\u662f\u5426\u7b26\u5408\u9884\u671f\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u591a\u5c42\u5d4c\u5957\u56de\u8c03\u4f1a\u4ea7\u751f\u56de\u8c03\u5730\u72f1\uff08callback hell\uff09\u3002")),(0,l.kt)("h3",{id:"2-\u5b9a\u65f6\u5668settimeoutsetintervalrequestanimationframe"},"2. \u5b9a\u65f6\u5668\uff1asetTimeout/setInterval/requestAnimationFrame"),(0,l.kt)("p",null,"\u8fd9\u4e09\u4e2a\u90fd\u53ef\u4ee5\u7528\u5f02\u6b65\u65b9\u5f0f\u8fd0\u884c\u4ee3\u7801\u3002\u4e3b\u8981\u7279\u5f81\u5982\u4e0b\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"setTimeout\uff1a\u7ecf\u8fc7\u4efb\u610f\u65f6\u95f4\u540e\u8fd0\u884c\u51fd\u6570\uff0c",(0,l.kt)("strong",{parentName:"li"},"\u9012\u5f52 setTimeout \u5728 JavaScript \u7ebf\u7a0b\u4e0d\u963b\u585e\u60c5\u7684\u51b5\u4e0b\u53ef\u4fdd\u8bc1\u6267\u884c\u95f4\u9694\u76f8\u540c"),"\u3002"),(0,l.kt)("li",{parentName:"ol"},"setInterval\uff1a\u5141\u8bb8\u91cd\u590d\u6267\u884c\u4e00\u4e2a\u51fd\u6570\uff0c\u5e76\u8bbe\u7f6e\u65f6\u95f4\u95f4\u9694\uff0c",(0,l.kt)("strong",{parentName:"li"},"\u4e0d\u80fd\u4fdd\u8bc1\u6267\u884c\u95f4\u9694\u76f8\u540c"),"\u3002"),(0,l.kt)("li",{parentName:"ol"},"requestAnimationFrame\uff1a\u4ee5",(0,l.kt)("strong",{parentName:"li"},"\u5f53\u524d\u6d4f\u89c8\u5668/\u7cfb\u7edf\u7684\u6700\u4f73\u5e27\u901f\u7387"),"\u91cd\u590d\u4e14\u9ad8\u6548\u5730\u8fd0\u884c\u51fd\u6570\u7684\u65b9\u6cd5\u3002\u4e00\u822c\u7528\u4e8e\u5904\u7406\u52a8\u753b\u6548\u679c\u3002")),(0,l.kt)("p",null,"setInterval \u4f1a\u6309\u8bbe\u5b9a\u7684\u65f6\u95f4\u95f4\u9694\u56fa\u5b9a\u8c03\u7528\uff0c\u5176\u4e2d setInterval \u91cc\u9762\u7684\u4ee3\u7801\u7684\u6267\u884c\u65f6\u95f4\u4e5f\u5305\u542b\u5728\u5185\uff0c\u6240\u4ee5",(0,l.kt)("strong",{parentName:"p"},"\u5b9e\u9645\u95f4\u9694\u5c0f\u4e8e\u8bbe\u5b9a\u7684\u65f6\u95f4\u95f4\u9694"),"\u3002\u800c\u9012\u5f52 setTimeout \u662f\u8c03\u7528\u65f6\u624d\u5f00\u59cb\u7b97\u65f6\u95f4\uff0c\u53ef\u4ee5\u4fdd\u8bc1\u591a\u6b21\u9012\u5f52\u8c03\u7528\u65f6\u7684\u95f4\u9694\u76f8\u540c\u3002"),(0,l.kt)("p",null,"\u5982\u679c\u5f53\u524d JavaScript \u7ebf\u7a0b",(0,l.kt)("strong",{parentName:"p"},"\u963b\u585e"),"\uff0c\u8f6e\u5230\u7684 setInterval \u65e0\u6cd5\u6267\u884c\uff0c\u90a3\u4e48\u672c\u6b21\u4efb\u52a1\u5c31\u4f1a",(0,l.kt)("strong",{parentName:"p"},"\u88ab\u4e22\u5f03"),"\u3002\u800c setTimeout \u88ab\u963b\u585e\u540e\u4e0d\u4f1a",(0,l.kt)("strong",{parentName:"p"},"\u88ab\u4e22\u5f03"),"\uff0c\u7b49\u5230\u7a7a\u95f2\u65f6\u4f1a\u7ee7\u7eed\u6267\u884c\uff0c\u4f46\u65e0\u6cd5\u4fdd\u8bc1\u6267\u884c\u95f4\u9694\u3002"),(0,l.kt)("h3",{id:"3-\u53d1\u5e03\u8ba2\u9605\u6a21\u5f0fpublish-subscribe-pattern"},"3. \u53d1\u5e03/\u8ba2\u9605\u6a21\u5f0f\uff08publish-subscribe pattern\uff09"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u53d1\u5e03/\u8ba2\u9605\u6a21\u5f0f\u662f\u4e00\u79cd\u5bf9\u8c61\u95f4\u4e00\u5bf9\u591a\u7684\u4f9d\u8d56\u5173\u7cfb\uff0c\u5f53\u4e00\u4e2a\u5bf9\u8c61\u7684\u72b6\u6001\u53d1\u751f\u6539\u53d8\u65f6\uff0c\u6240\u6709\u4f9d\u8d56\u4e8e\u5b83\u7684\u5bf9\u8c61\u90fd\u5c06\u5f97\u5230\u72b6\u6001\u6539\u53d8\u7684\u901a\u77e5\u3002")),(0,l.kt)("p",null,"\u4e0a\u9762\u5f02\u6b65\u56de\u8c03\u7684\u4f8b\u5b50\u4e5f\u662f\u4e00\u4e2a\u53d1\u5e03/\u8ba2\u9605\u6a21\u5f0f\uff08publish-subscribe pattern\uff09\u7684\u5b9e\u73b0\u3002\u8ba2\u9605 btn \u7684 click \u4e8b\u4ef6\uff0c\u5f53 btn \u88ab\u70b9\u51fb\u65f6\u5411\u8ba2\u9605\u8005\u53d1\u9001\u8fd9\u4e2a\u6d88\u606f\uff0c\u6267\u884c\u5bf9\u5e94\u7684\u64cd\u4f5c\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},'class PubSub {\n constructor() {\n // \u5b58\u50a8\u6240\u6709\u8ba2\u9605\u7684\u4e8b\u4ef6\u7c7b\u578b\u53ca\u5bf9\u5e94\u7684\u8ba2\u9605\u51fd\u6570\u6570\u7ec4\n // key <eventType>: value <subscribeList>[]\n this.handlers = {};\n }\n // \u8ba2\u9605\u4e8b\u4ef6\u65b9\u6cd5\n on(eventType, handler) {\n if (!(eventType in this.handlers)) this.handlers[eventType] = [];\n this.handlers[eventType].push(handler);\n }\n // \u6d88\u606f\u53d1\u5e03\u65b9\u6cd5\n emit(eventType, ...handlerArgs) {\n this.handlers[eventType].forEach((v) => {\n v(...handlerArgs);\n });\n }\n // \u53d6\u6d88\u8ba2\u9605\n remove(eventType, handler) {\n // \u6ca1\u6709\u4f20\u5165\u5177\u4f53\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u5219\u79fb\u9664\u8be5\u4e8b\u4ef6\u7c7b\u578b\u7684\u6240\u6709\u8ba2\u9605\u51fd\u6570\n // \u6709\u5219\u5728\u8ba2\u9605\u6570\u7ec4\u4e2d\u79fb\u9664\u5bf9\u5e94\u7684\u51fd\u6570\n if (!handler) {\n this.handlers[eventType].length = 0;\n } else {\n const key = this.handlers[eventType].findIndex((v) => v === handler);\n if (key !== -1) this.handlers[eventType].splice(key, 1);\n }\n }\n}\n\nconst test1 = new PubSub();\nconst fn1 = (...data) => console.log(data);\ntest1.on("event1", fn1);\ntest1.on("event1", (...data) => console.log(`fn2: ${data}`));\ntest1.emit("event1", "hzfe1", "hzfe2", "hzfe3");\ntest1.remove("event1", fn1);\n// ["hzfe1", "hzfe2", "hzfe3"] fn1\u6253\u5370\n// fn2: hzfe1,hzfe2,hzfe3\n')),(0,l.kt)("p",null,"\u53d1\u5e03/\u8ba2\u9605\u6a21\u5f0f\u53ef\u4ee5\u66f4\u7ec6\u81f4\u5730\u4e86\u89e3\u5230\u6709\u591a\u5c11\u79cd\u4e8b\u4ef6\u7c7b\u578b\u4ee5\u53ca\u6bcf\u79cd\u7c7b\u578b\u5bf9\u5e94\u7684\u8ba2\u9605\u4e8b\u4ef6\uff0c\u65b9\u4fbf\u8fdb\u4e00\u6b65\u7684\u76d1\u542c\u4e0e\u63a7\u5236\u3002"),(0,l.kt)("h3",{id:"4-promise"},"4. Promise"),(0,l.kt)("p",null,"Promise \u63d0\u4f9b\u4e86\u5b8c\u6210\u548c\u62d2\u7edd\u4e24\u4e2a\u72b6\u6001\u6765\u6807\u8bc6\u5f02\u6b65\u64cd\u4f5c\u7ed3\u679c\uff0c\u901a\u8fc7 then \u548c catch \u53ef\u4ee5\u5206\u522b\u5bf9\u7740\u4e24\u4e2a\u72b6\u6001\u8fdb\u884c\u8ddf\u8e2a\u5904\u7406\u3002\u548c\u4e8b\u4ef6\u76d1\u542c\u7684\u4e3b\u8981\u5dee\u522b\u5728\u4e8e\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u4e00\u4e2a Promise \u53ea\u80fd\u6210\u529f\u6216\u5931\u8d25\u4e00\u6b21\uff0c\u4e00\u65e6\u72b6\u6001\u6539\u53d8\uff0c\u5c31\u65e0\u6cd5\u4ece\u6210\u529f\u5207\u6362\u5230\u5931\u8d25\uff0c\u53cd\u4e4b\u4ea6\u7136\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u5982\u679c Promise \u6210\u529f\u6216\u5931\u8d25\uff0c\u90a3\u4e48\u5373\u4f7f\u5728\u4e8b\u4ef6\u53d1\u751f\u4e4b\u540e\u6dfb\u52a0\u6210\u529f/\u5931\u8d25\u56de\u8c03\uff0c\u4e5f\u5c06\u8c03\u7528\u6b63\u786e\u7684\u56de\u8c03\u3002")),(0,l.kt)("p",null,"Promise \u4f7f\u7528\u987a\u5e8f\u7684\u65b9\u5f0f\u6765\u8868\u8fbe\u5f02\u6b65\uff0c\u5c06\u56de\u8c03\u7684\u63a7\u5236\u6743\u8f6c\u4ea4\u7ed9\u4e86\u53ef\u4ee5\u4fe1\u4efb\u7684 Promise.resolve()\uff0c\u540c\u65f6\u4e5f\u80fd\u591f\u4f7f\u7528\u94fe\u5f0f\u6d41\u7684\u65b9\u5f0f\u907f\u514d\u56de\u8c03\u5730\u72f1\u7684\u4ea7\u751f\uff0c\u89e3\u51b3\u4e86\u5f02\u6b65\u56de\u8c03\u7684\u95ee\u9898\u3002\u4f46 Promise \u4e5f\u6709\u7f3a\u9677\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u987a\u5e8f\u9519\u8bef\u5904\u7406\uff1a\u5982\u679c\u4e0d\u8bbe\u7f6e\u56de\u8c03\u51fd\u6570\uff0cPromise \u94fe\u4e2d\u7684\u9519\u8bef\u5f88\u5bb9\u6613\u88ab\u5ffd\u7565\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u5355\u51b3\u8bae\uff1aPromise \u53ea\u80fd\u88ab\u51b3\u8bae\u4e00\u6b21\uff08\u5b8c\u6210\u6216\u62d2\u7edd\uff09\uff0c\u4e0d\u80fd\u5f88\u597d\u5730\u652f\u6301\u591a\u6b21\u89e6\u53d1\u7684\u4e8b\u4ef6\u53ca\u6570\u636e\u6d41\uff08\u652f\u6301\u7684",(0,l.kt)("a",{parentName:"li",href:"https://streams.spec.whatwg.org/"},"\u6807\u51c6"),"\u6b63\u5728\u5236\u5b9a\u4e2d\uff09\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u65e0\u6cd5\u83b7\u53d6\u72b6\u6001\uff1a\u5904\u4e8e Pending \u72b6\u6001\u65f6\uff0c\u65e0\u6cd5\u5f97\u77e5\u76ee\u524d\u8fdb\u5c55\u5230\u54ea\u4e00\u4e2a\u9636\u6bb5\uff08\u521a\u521a\u5f00\u59cb\u8fd8\u662f\u5373\u5c06\u5b8c\u6210\uff09\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u65e0\u6cd5\u53d6\u6d88\uff1a\u4e00\u65e6\u521b\u5efa\u4e86 Promise \u5e76\u6ce8\u518c\u4e86\u5b8c\u6210/\u62d2\u7edd\u51fd\u6570\uff0c\u4e0d\u80fd\u53d6\u6d88\u6267\u884c\u3002")),(0,l.kt)("h3",{id:"5-\u751f\u6210\u5668-generator"},"5. \u751f\u6210\u5668 Generator"),(0,l.kt)("p",null,"Generator \u51fd\u6570\u662f ES6 \u63d0\u4f9b\u7684\u4e00\u79cd\u5f02\u6b65\u7f16\u7a0b\u89e3\u51b3\u65b9\u6848\uff0c\u8bed\u6cd5\u4e0e\u4f20\u7edf\u51fd\u6570\u5b8c\u5168\u4e0d\u540c\uff0c\u6700\u5927\u7684\u7279\u70b9\u5c31\u662f\u53ef\u4ee5\u63a7\u5236\u51fd\u6570\u7684\u6267\u884c\u3002\u7b80\u5355\u793a\u4f8b\u5982\u4e0b\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"function* helloHzfeGenerator() {\n yield \"hello\";\n yield \"hzfe\";\n return \"ending\";\n}\n\nvar hello = helloHzfeGenerator();\n\nhello.next();\n// { value: 'hello', done: false }\n\nhello.next();\n// { value: 'hzfe', done: false }\n\nhello.next();\n// { value: 'ending', done: true }\n\nhello.next();\n// { value: undefined, done: true }\n")),(0,l.kt)("p",null,"\u751f\u6210\u5668 Generator \u5e76\u4e0d\u50cf\u666e\u901a\u51fd\u6570\u90a3\u6837\u603b\u662f\u8fd0\u884c\u5230\u7ed3\u675f\uff0c\u53ef\u4ee5\u5728\u8fd0\u884c\u5f53\u4e2d\u901a\u8fc7 yield \u6765\u6682\u505c\u5e76\u5b8c\u5168\u4fdd\u6301\u5176\u72b6\u6001\uff0c\u518d\u901a\u8fc7 next \u6062\u590d\u8fd0\u884c\u3002yield/next \u4e0d\u53ea\u662f\u63a7\u5236\u673a\u5236\uff0c\u4e5f\u662f\u4e00\u79cd\u53cc\u5411\u6d88\u606f\u4f20\u9012\u673a\u5236\u3002yield \u8868\u8fbe\u5f0f\u672c\u8d28\u4e0a\u662f\u6682\u505c\u4e0b\u6765\u7b49\u5f85\u67d0\u4e2a\u503c\uff0cnext \u8c03\u7528\u4f1a\u5411\u88ab\u6682\u505c\u7684 yield \u8868\u8fbe\u5f0f\u4f20\u56de\u4e00\u4e2a\u503c\uff08\u6216\u8005\u662f\u9690\u5f0f\u7684 undefined\uff09\u3002"),(0,l.kt)("p",null,"\u751f\u6210\u5668 Generator \u4fdd\u6301\u4e86\u987a\u5e8f\u3001\u540c\u6b65\u3001\u963b\u585e\u7684\u4ee3\u7801\u6a21\u5f0f\uff0c\u540c\u6837\u89e3\u51b3\u4e86\u5f02\u6b65\u56de\u8c03\u7684\u95ee\u9898\u3002"),(0,l.kt)("h3",{id:"6-aysncawait"},"6. aysnc/await"),(0,l.kt)("p",null,"aysnc/await \u5c5e\u4e8e ",(0,l.kt)("a",{parentName:"p",href:"https://262.ecma-international.org/8.0/"},"ECMAScript 2017 JavaScript \u7248"),"\u7684\u4e00\u90e8\u5206\uff0c\u4f7f\u5f02\u6b65\u4ee3\u7801\u66f4\u6613\u4e8e\u7f16\u5199\u548c\u9605\u8bfb\u3002\u901a\u8fc7\u4f7f\u7528\u5b83\u4eec\uff0c\u5f02\u6b65\u4ee3\u7801\u770b\u8d77\u6765\u66f4\u50cf\u662f\u540c\u6b65\u4ee3\u7801\u3002\u5177\u6709\u5982\u4e0b\u7279\u70b9\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"async/await \u4e0d\u80fd\u7528\u4e8e\u666e\u901a\u7684\u56de\u8c03\u51fd\u6570\u3002"),(0,l.kt)("li",{parentName:"ol"},"async/await \u4e0e Promise \u4e00\u6837\uff0c\u662f\u975e\u963b\u585e\u7684\u3002"),(0,l.kt)("li",{parentName:"ol"},"async/await \u4f7f\u5f97\u5f02\u6b65\u4ee3\u7801\u770b\u8d77\u6765\u50cf\u540c\u6b65\u4ee3\u7801\u3002")),(0,l.kt)("p",null,"async/await \u4e5f\u5b58\u5728\u95ee\u9898\uff1aawait \u5173\u952e\u5b57\u4f1a\u963b\u585e\u5176\u540e\u7684\u4ee3\u7801\uff0c\u76f4\u5230 Promise \u5b8c\u6210\uff0c\u5c31\u50cf\u6267\u884c\u540c\u6b65\u64cd\u4f5c\u4e00\u6837\u3002\u5b83\u53ef\u4ee5\u5141\u8bb8\u5176\u4ed6\u4efb\u52a1\u5728\u6b64\u671f\u95f4\u7ee7\u7eed\u8fd0\u884c\uff0c\u4f46\u81ea\u5df1\u7684\u4ee3\u7801\u4f1a\u88ab\u963b\u585e\u3002\u89e3\u51b3\u65b9\u6848\u662f\u5c06 Promise \u5bf9\u8c61\u5b58\u50a8\u5728\u53d8\u91cf\u4e2d\u6765\u540c\u65f6\u5f00\u59cb\uff0c\u7136\u540e\u7b49\u5f85\u5b83\u4eec\u5168\u90e8\u6267\u884c\u5b8c\u6bd5\u3002\u5177\u4f53\u53c2\u7167 ",(0,l.kt)("a",{parentName:"p",href:"https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html"},"fast asnyc await"),"\u3002\u5982\u679c\u5185\u90e8\u7684 await \u7b49\u5f85\u7684\u5f02\u6b65\u4efb\u52a1\u4e4b\u95f4\u6ca1\u6709\u4f9d\u8d56\u5173\u7cfb\uff0c\u4e14\u9700\u8981\u83b7\u53d6\u8fd9\u4e9b\u5f02\u6b65\u64cd\u4f5c\u7684\u7ed3\u679c\uff0c\u53ef\u4ee5\u4f7f\u7528 Promise.allSettled() \u540c\u65f6\u6267\u884c\u8fd9\u4e9b\u4efb\u52a1\u5e76\u83b7\u5f97\u7ed3\u679c\u3002"),(0,l.kt)("h3",{id:"7-web-worker"},"7. Web Worker"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"Web Worker \u4e3a JavaScript \u521b\u9020\u4e86\u591a\u7ebf\u7a0b\u73af\u5883"),"\uff0c\u5141\u8bb8\u4e3b\u7ebf\u7a0b\u521b\u5efa Worker \u7ebf\u7a0b\uff0c\u5c06\u4e00\u4e9b\u4efb\u52a1\u5206\u914d\u7ed9 Worker \u7ebf\u7a0b\u8fd0\u884c\uff0c\u5904\u7406\u5b8c\u540e\u53ef\u4ee5\u901a\u8fc7 postMessage \u5c06\u7ed3\u679c\u4f20\u9012\u7ed9\u4e3b\u7ebf\u7a0b\u3002\u4f18\u70b9\u5728\u4e8e\u53ef\u4ee5\u5728\u4e00\u4e2a\u5355\u72ec\u7684\u7ebf\u7a0b\u4e2d\u6267\u884c\u8d39\u65f6\u7684\u5904\u7406\u4efb\u52a1\uff0c\u4ece\u800c\u5141\u8bb8\u4e3b\u7ebf\u7a0b\u4e2d\u7684\u4efb\u52a1\uff08\u901a\u5e38\u662f UI\uff09\u8fd0\u884c\u4e0d\u88ab\u963b\u585e/\u653e\u6162\u3002"),(0,l.kt)("p",null,"\u4f7f\u7528 Web Worker \u65f6\u6709\u4ee5\u4e0b\u4e09\u70b9\u9700\u8981\u6ce8\u610f\u7684\u5730\u65b9\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("strong",{parentName:"li"},"\u5728 Worker \u5185\u90e8\u65e0\u6cd5\u8bbf\u95ee\u4e3b\u7ebf\u7a0b\u7684\u4efb\u4f55\u8d44\u6e90"),"\uff0c\u5305\u62ec\u5168\u5c40\u53d8\u91cf\uff0c\u9875\u9762\u7684 DOM \u6216\u8005\u5176\u4ed6\u8d44\u6e90\uff0c\u56e0\u4e3a\u8fd9\u662f\u4e00\u4e2a\u5b8c\u5168\u72ec\u7acb\u7684\u7ebf\u7a0b\u3002"),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("strong",{parentName:"li"},"Worker \u548c\u4e3b\u7ebf\u7a0b\u95f4\u7684\u6570\u636e\u4f20\u9012\u901a\u8fc7\u6d88\u606f\u673a\u5236\u8fdb\u884c"),"\u3002\u4f7f\u7528 postMessage \u65b9\u6cd5\u53d1\u9001\u6d88\u606f\uff1b\u4f7f\u7528 onmessage \u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u6765\u54cd\u5e94\u6d88\u606f\u3002"),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("strong",{parentName:"li"},"Worker \u53ef\u4ee5\u521b\u5efa\u65b0\u7684 Worker\uff0c\u65b0\u7684 Worker \u548c\u7236\u9875\u9762\u540c\u6e90"),"\u3002Worker \u5728\u4f7f\u7528 XMLHttpRequest \u8fdb\u884c\u7f51\u7edc I/O \u65f6\uff0cXMLHttpRequest \u7684 responseXML \u548c channel \u5c5e\u6027\u4f1a\u8fd4\u56de null\u3002")),(0,l.kt)("p",null,"Web Worker \u4e3b\u8981\u5e94\u7528\u573a\u666f\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u5904\u7406\u5bc6\u96c6\u578b\u6570\u5b66\u8ba1\u7b97"),(0,l.kt)("li",{parentName:"ol"},"\u5927\u6570\u636e\u96c6\u6392\u5e8f"),(0,l.kt)("li",{parentName:"ol"},"\u6570\u636e\u5904\u7406\uff08\u538b\u7f29\uff0c\u97f3\u9891\u5206\u6790\uff0c\u56fe\u50cf\u5904\u7406\u7b49\uff09"),(0,l.kt)("li",{parentName:"ol"},"\u9ad8\u6d41\u91cf\u7f51\u7edc\u901a\u4fe1")),(0,l.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous"},"\u5f02\u6b65 JavaScript")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers"},"\u4f7f\u7528 Web Worker"))))}m.isMDXComponent=!0}}]); |