-
Notifications
You must be signed in to change notification settings - Fork 16
/
5.JS 异步编程及常考面试题.htm
242 lines (233 loc) · 80.6 KB
/
5.JS 异步编程及常考面试题.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<!-- saved from url=(0080)https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc7198518825171726cfce -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"><meta name="google-site-verification" content="cCHsgG9ktuCTgWgYfqCJql8AeR4gAne4DTZqztPoirE"><meta name="apple-itunes-app" content="app-id=987739104"><meta name="baidu-site-verification" content="qiK2a1kcFc"><meta name="360-site-verification" content="4c3c7d57d59f0e1a308462fbc7fd7e51"><meta name="sogou_site_verification" content="c49WUDZczQ"><style>body {
font-size: 16px;
line-height: 2;
}
a, button, input {
margin: 1rem 1.5rem;
}
img {
width: 0;
height: 0;
}
#juejin {
overflow-x: hidden;
}</style><title data-vue-meta="true">前端面试之道 - yck - 掘金小册</title><link rel="apple-touch-icon" sizes="180x180" href="https://b-gold-cdn.xitu.io/favicons/v2/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-16x16.png"><link rel="manifest" href="https://b-gold-cdn.xitu.io/favicons/v2/manifest.json"><link rel="mask-icon" href="https://b-gold-cdn.xitu.io/favicons/v2/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon.ico"><meta name="msapplication-config" content="https://b-gold-cdn.xitu.io/favicons/v2/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="search" title="掘金" href="https://b-gold-cdn.xitu.io/conf/search.xml" type="application/opensearchdescription+xml"><link rel="stylesheet" href="./5.JS 异步编程及常考面试题_files/ionicons.min.css"><link rel="stylesheet" href="./5.JS 异步编程及常考面试题_files/iconfont.css"><link href="./5.JS 异步编程及常考面试题_files/0.f53dd8c7dec37187a1f0.css" rel="stylesheet"><script async="" src="./5.JS 异步编程及常考面试题_files/hm.js"></script><script async="" src="./5.JS 异步编程及常考面试题_files/analytics.js"></script><script type="text/javascript" async="" src="./5.JS 异步编程及常考面试题_files/vds.js"></script><script charset="utf-8" src="./5.JS 异步编程及常考面试题_files/13.be327205e46595a11182.js"></script><meta data-vmid="keywords" name="keywords" content="掘金,稀土,Vue.js,微信小程序,Kotlin,RxJava,React Native,Wireshark,敏捷开发,Bootstrap,OKHttp,正则表达式,WebGL,Webpack,Docker,MVVM" data-vue-meta="true"><meta data-vmid="description" name="description" content="掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。" data-vue-meta="true"></head><body><div id="juejin" data-v-c5c2a81e=""><div class="global-component-box" data-v-c5c2a81e=""><!----><div data-v-c8da6528="" data-v-c5c2a81e="" class="alert-list alert-list"></div><!----><!----><!----><div class="emoji-barrage" data-v-beb06b1a="" data-v-c5c2a81e=""><!----></div><div class="book-new-user-award-popup" style="display:none;" data-v-40eb6fce="" data-v-c5c2a81e=""><div class="content-box" style="display:;" data-v-40eb6fce=""><div class="close ion-close-round" data-v-40eb6fce=""></div><div class="header" data-v-40eb6fce=""><div class="icon" data-v-40eb6fce=""><img src="./5.JS 异步编程及常考面试题_files/icon.a87e5ae.svg" data-v-40eb6fce=""></div><div class="txt" data-v-40eb6fce="">新人专享好礼</div></div><div class="desc" data-v-40eb6fce="">凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。</div><div class="tickets" data-v-40eb6fce=""><div class="ticket" data-v-40eb6fce=""><div class="ticket__inner" data-v-40eb6fce=""><div class="enjoy" data-v-40eb6fce=""><span class="new-title" data-v-40eb6fce="">小册新人 5 折券</span></div><div class="sale" data-v-40eb6fce="">最高可省 15 元</div></div></div><div class="ticket" data-v-40eb6fce=""><div class="ticket__inner" data-v-40eb6fce=""><div class="enjoy" data-v-40eb6fce=""><span class="new-title" data-v-40eb6fce="">小册新人 5 折券</span></div><div class="sale" data-v-40eb6fce="">最高可省 15 元</div></div></div><div class="ticket" data-v-40eb6fce=""><div class="ticket__inner" data-v-40eb6fce=""><div class="enjoy" data-v-40eb6fce=""><span class="new-title" data-v-40eb6fce="">小册新人 5 折券</span></div><div class="sale" data-v-40eb6fce="">最高可省 15 元</div></div></div></div><div class="remark" data-v-40eb6fce="">注：专享券的使用期限在领券的七天内。</div><div class="submit-btn" data-v-40eb6fce="">一键领取</div></div><div class="model success" style="display:none;" data-v-40eb6fce=""><div class="heading" data-v-40eb6fce="">领取成功</div><div class="content-text" data-v-40eb6fce="">购买小册时自动使用专享券</div><div class="btn-success-footer" data-v-40eb6fce=""><div class="btn-ok" data-v-40eb6fce="">知道了</div><div class="btn-ok btn-link" data-v-40eb6fce="">前往小册首页</div></div></div><div class="model fail" style="display:none;" data-v-40eb6fce=""><div class="heading" data-v-40eb6fce="">领取失败</div><div class="content-text" data-v-40eb6fce="">本活动仅适用于小册新用户</div><div class="btn-ok" data-v-40eb6fce="">知道了</div></div></div><!----></div><!----><div data-v-25b273c2="" data-v-c5c2a81e="" class="book-read-view"><section data-v-25b273c2="" class="book-section"><div data-v-25b273c2="" class="book-summary"><div data-v-25b273c2="" class="book-summary-masker"></div><div data-v-25b273c2="" class="book-summary-inner"><div data-v-25b273c2="" class="book-summary__header"><a data-v-25b273c2="" href="https://juejin.im/books" target="" rel="" class="logo"><img data-v-25b273c2="" src="./5.JS 异步编程及常考面试题_files/logo.a7995ad.svg"></a><div data-v-25b273c2="" class="label">小册</div><!----></div><!----><div data-v-d0eb2184="" data-v-25b273c2="" class="book-directory book-directory bought"><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">1</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">小册食用指南</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">2</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（一）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">3</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（二）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">4</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">ES6 知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section route-active section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">5</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 异步编程及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">6</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">手写 Promise</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">7</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Event Loop</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">8</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 进阶知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">9</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 思考题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">10</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">DevTools Tips</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">11</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器基础知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">12</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器缓存机制</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">13</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器渲染原理</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">14</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">安全防范知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">15</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">从 V8 中看 JS 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">16</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">性能优化琐碎事</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">17</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Webpack 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">18</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">实现小型打包工具</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">19</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 和 Vue 两大框架之间的相爱相杀</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">20</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">21</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">22</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常用知识点</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">23</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 进阶</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">24</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">监控</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">25</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">TCP / UDP</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">26</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP 及 TLS</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">27</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP 2.0</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">28</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">输入 URL 到页面渲染的整个流程</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">29</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">设计模式</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">30</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常见数据结构</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">31</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常考算法题解析</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">32</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">CSS 常考面试题解析</div><!----><div data-v-d0eb2184="" class="sub-line"><div data-v-d0eb2184="" class="writing">写作中...</div></div></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">33</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">如何写好一封简历</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">34</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">面试常用技巧</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">35</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">前方的路，让我们结伴同行</div><!----><!----></div><!----></a></div><div data-v-25b273c2="" class="book-summary__footer"><div data-v-25b273c2="" class="qr-icon"><img data-v-25b273c2="" src="./5.JS 异步编程及常考面试题_files/qr-icon.881015a.svg"></div><div data-v-25b273c2="" class="qr-tips"><span data-v-25b273c2="" class="ion-close"></span><div data-v-25b273c2="" class="title"><span data-v-25b273c2="">关注公众号</span><span data-v-25b273c2="">领取优惠码</span></div><div data-v-25b273c2="" class="qr-img"><img data-v-25b273c2="" src="./5.JS 异步编程及常考面试题_files/wx-qr.13d8b4d.png"></div></div></div></div></div><div data-v-25b273c2="" class="book-content"><div data-v-25b273c2="" class="book-content-inner"><div data-v-25b273c2="" class="book-content__header visible"><div data-v-25b273c2="" class="switch"><img data-v-25b273c2="" src="./5.JS 异步编程及常考面试题_files/icon.3e69d5a.svg"></div><div data-v-25b273c2="" class="menu"><img data-v-25b273c2="" src="./5.JS 异步编程及常考面试题_files/menu.74b9add.svg"></div><div data-v-25b273c2="" class="title"><a data-v-25b273c2="" href="https://juejin.im/book/5bdc715fe51d454e755f75ef" target="" rel="">前端面试之道</a></div><div data-v-e1714a36="" data-v-25b273c2="" class="user-auth user-auth"><div data-v-e1714a36="" class="nav-item menu"><div data-v-57c47624="" data-v-cf310dfc="" data-v-e1714a36="" data-src="https://avatars0.githubusercontent.com/u/33979626?v=4" class="lazy avatar avatar loaded" style="background-image: url("https://avatars0.githubusercontent.com/u/33979626?v=4");"></div><div data-v-e1714a36="" class="nav-menu user-dropdown-list" style="display: none;"><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-write"></i><span data-v-e1714a36="">写文章</span></a></li><!----><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-draft"></i><span data-v-e1714a36="">草稿</span></a></li></ul><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90"><i data-v-e1714a36="" class="fengwei fw-person"></i><span data-v-e1714a36="">我的主页</span></a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/likes"><i data-v-e1714a36="" class="fengwei fw-like"></i><span data-v-e1714a36="">我喜欢的</span></a></li><!----><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/collections"><i data-v-e1714a36="" class="fengwei fw-collection"></i><span data-v-e1714a36="">我的收藏集</span></a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/books?type=bought"><i data-v-e1714a36="" class="fengwei fw-bought"></i><span data-v-e1714a36="">已购</span></a></li><!----><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/subscribe"><i data-v-e1714a36="" class="fengwei fw-tag"></i><span data-v-e1714a36="">标签管理</span></a></li></ul><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/user/settings"><i data-v-e1714a36="" class="fengwei fw-setting"></i><span data-v-e1714a36="">设置</span></a></li><li data-v-e1714a36="" class="nav-menu-item more"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-info"></i><span data-v-e1714a36="">关于</span><i data-v-e1714a36="" class="ion-chevron-right more-icon"></i></a><div data-v-e1714a36="" class="nav-menu more-dropdown-list"><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/app" target="_blank">下载应用</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://juejin.im/about" target="_blank">关于</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://xitu.io/jobs" target="_blank">加入我们</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://github.com/xitu/gold-miner" rel="nofollow noopener noreferrer" target="_blank">翻译计划</a></li><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36="" href="https://bd.juejin.im/?utm_campaign=bd&utm_source=web&utm_medium=nav" target="_blank">合作伙伴</a></li></ul></div></li></ul><ul data-v-e1714a36="" class="nav-menu-item-group"><li data-v-e1714a36="" class="nav-menu-item"><a data-v-e1714a36=""><i data-v-e1714a36="" class="fengwei fw-logout"></i><span data-v-e1714a36="">登出</span></a></li></ul></div></div><!----></div><!----></div><div data-v-25b273c2="" class="book-body transition--next"><div data-v-b0f6a942="" data-v-25b273c2="" class="section-view book-section-content"><div data-v-ecce5e7e="" data-v-b0f6a942="" class="section-content"><div data-v-ecce5e7e="" class="section-page book-section-view"><div data-v-ecce5e7e="" class="entry-content article-content"><h1 class="heading" data-id="heading-0">JS 异步编程及常考面试题</h1>
<p>在上一章节中我们了解了常见 ES6 语法的一些知识点。这一章节我们将会学习异步编程这一块的内容，鉴于异步编程是 JS 中至关重要的内容，所以我们将会用三个章节来学习异步编程涉及到的重点和难点，同时这一块内容也是面试常考范围，希望大家认真学习。</p>
<h2 class="heading" data-id="heading-1">并发（concurrency）和并行（parallelism）区别</h2>
<blockquote class="warning"><p>涉及面试题：并发与并行的区别？
</p></blockquote><p>异步和这小节的知识点其实并不是一个概念，但是这两个名词确实是很多人都常会混淆的知识点。其实混淆的原因可能只是两个名词在中文上的相似，在英文上来说完全是不同的单词。</p>
<p>并发是宏观概念，我分别有任务 A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。</p>
<p>并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行。</p>
<h2 class="heading" data-id="heading-2">回调函数（Callback）</h2>
<blockquote class="warning"><p>涉及面试题：什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？
</p></blockquote><p>回调函数应该是大家经常使用到的，以下代码就是一个回调函数的例子：</p>
<pre><code class="hljs js" lang="js">ajax(url, () => {
<span class="hljs-comment">// 处理逻辑</span>
})
</code></pre><p>但是回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。假设多个请求存在依赖性，你可能就会写出如下代码：</p>
<pre><code class="hljs js" lang="js">ajax(url, () => {
<span class="hljs-comment">// 处理逻辑</span>
ajax(url1, () => {
<span class="hljs-comment">// 处理逻辑</span>
ajax(url2, () => {
<span class="hljs-comment">// 处理逻辑</span>
})
})
})
</code></pre><p>以上代码看起来不利于阅读和维护，当然，你可能会想说解决这个问题还不简单，把函数分开来写不就得了</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">firstAjax</span>(<span class="hljs-params"></span>) </span>{
ajax(url1, () => {
<span class="hljs-comment">// 处理逻辑</span>
secondAjax()
})
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">secondAjax</span>(<span class="hljs-params"></span>) </span>{
ajax(url2, () => {
<span class="hljs-comment">// 处理逻辑</span>
})
}
ajax(url, () => {
<span class="hljs-comment">// 处理逻辑</span>
firstAjax()
})
</code></pre><p>以上的代码虽然看上去利于阅读了，但是还是没有解决根本问题。</p>
<p>回调地狱的根本问题就是：</p>
<ol>
<li>嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身</li>
<li>嵌套函数一多，就很难处理错误</li>
</ol>
<p>当然，回调函数还存在着别的几个缺点，比如不能使用 <code>try catch</code> 捕获错误，不能直接 <code>return</code>。在接下来的几小节中，我们将来学习通过别的技术解决这些问题。</p>
<h2 class="heading" data-id="heading-3">Generator</h2>
<blockquote class="warning"><p>涉及面试题：你理解的 Generator 是什么？
</p></blockquote><p><code>Generator</code> 算是 ES6 中难理解的概念之一了，<code>Generator</code> 最大的特点就是可以控制函数的执行。在这一小节中我们不会去讲什么是 <code>Generator</code>，而是把重点放在 <code>Generator</code> 的一些容易困惑的地方。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> *<span class="hljs-title">foo</span>(<span class="hljs-params">x</span>) </span>{
<span class="hljs-keyword">let</span> y = <span class="hljs-number">2</span> * (<span class="hljs-keyword">yield</span> (x + <span class="hljs-number">1</span>))
<span class="hljs-keyword">let</span> z = <span class="hljs-keyword">yield</span> (y / <span class="hljs-number">3</span>)
<span class="hljs-keyword">return</span> (x + y + z)
}
<span class="hljs-keyword">let</span> it = foo(<span class="hljs-number">5</span>)
<span class="hljs-built_in">console</span>.log(it.next()) <span class="hljs-comment">// => {value: 6, done: false}</span>
<span class="hljs-built_in">console</span>.log(it.next(<span class="hljs-number">12</span>)) <span class="hljs-comment">// => {value: 8, done: false}</span>
<span class="hljs-built_in">console</span>.log(it.next(<span class="hljs-number">13</span>)) <span class="hljs-comment">// => {value: 42, done: true}</span>
</code></pre><p>你也许会疑惑为什么会产生与你预想不同的值，接下来就让我为你逐行代码分析原因</p>
<ul>
<li>首先 <code>Generator</code> 函数调用和普通函数不同，它会返回一个迭代器</li>
<li>当执行第一次 <code>next</code> 时，传参会被忽略，并且函数暂停在 <code>yield (x + 1)</code> 处，所以返回 <code>5 + 1 = 6</code></li>
<li>当执行第二次 <code>next</code> 时，传入的参数等于上一个 <code>yield</code> 的返回值，如果你不传参，<code>yield</code> 永远返回 <code>undefined</code>。此时 <code>let y = 2 * 12</code>，所以第二个 <code>yield</code> 等于 <code>2 * 12 / 3 = 8</code></li>
<li>当执行第三次 <code>next</code> 时，传入的参数会传递给 <code>z</code>，所以 <code>z = 13, x = 5, y = 24</code>，相加等于 <code>42</code></li>
</ul>
<p><code>Generator</code> 函数一般见到的不多，其实也于他有点绕有关系，并且一般会配合 co 库去使用。当然，我们可以通过 <code>Generator</code> 函数解决回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> *<span class="hljs-title">fetch</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">yield</span> ajax(url, () => {})
<span class="hljs-keyword">yield</span> ajax(url1, () => {})
<span class="hljs-keyword">yield</span> ajax(url2, () => {})
}
<span class="hljs-keyword">let</span> it = fetch()
<span class="hljs-keyword">let</span> result1 = it.next()
<span class="hljs-keyword">let</span> result2 = it.next()
<span class="hljs-keyword">let</span> result3 = it.next()
</code></pre><h2 class="heading" data-id="heading-4">Promise</h2>
<blockquote class="warning"><p>涉及面试题：Promise 的特点是什么，分别有什么优缺点？什么是 Promise 链？Promise 构造函数执行和 then 函数执行有什么区别？
</p></blockquote><p><code>Promise</code> 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是：</p>
<ol>
<li>等待中（pending）</li>
<li>完成了 （resolved）</li>
<li>拒绝了（rejected）</li>
</ol>
<p>这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变</p>
<pre><code class="hljs bash" lang="bash">new Promise((resolve, reject) => {
resolve(<span class="hljs-string">'success'</span>)
// 无效
reject(<span class="hljs-string">'reject'</span>)
})
</code></pre><p>当我们在构造 <code>Promise</code> 的时候，构造函数内部的代码是立即执行的</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'new Promise'</span>)
resolve(<span class="hljs-string">'success'</span>)
})
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'finifsh'</span>)
<span class="hljs-comment">// new Promise -> finifsh</span>
</code></pre><p><code>Promise</code> 实现了链式调用，也就是说每次调用 <code>then</code> 之后返回的都是一个 <code>Promise</code>，并且是一个全新的 <code>Promise</code>，原因也是因为状态不可变。如果你在 <code>then</code> 中 使用了 <code>return</code>，那么 <code>return</code> 的值会被 <code>Promise.resolve()</code> 包装</p>
<pre><code class="hljs js" lang="js"><span class="hljs-built_in">Promise</span>.resolve(<span class="hljs-number">1</span>)
.then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
<span class="hljs-built_in">console</span>.log(res) <span class="hljs-comment">// => 1</span>
<span class="hljs-keyword">return</span> <span class="hljs-number">2</span> <span class="hljs-comment">// 包装成 Promise.resolve(2)</span>
})
.then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
<span class="hljs-built_in">console</span>.log(res) <span class="hljs-comment">// => 2</span>
})
</code></pre><p>当然了，<code>Promise</code> 也很好地解决了回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：</p>
<pre><code class="hljs js" lang="js">ajax(url)
.then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
<span class="hljs-built_in">console</span>.log(res)
<span class="hljs-keyword">return</span> ajax(url1)
}).then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
<span class="hljs-built_in">console</span>.log(res)
<span class="hljs-keyword">return</span> ajax(url2)
}).then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> <span class="hljs-built_in">console</span>.log(res))
</code></pre><p>前面都是在讲述 <code>Promise</code> 的一些优点和特点，其实它也是存在一些缺点的，比如无法取消 <code>Promise</code>，错误需要通过回调函数捕获。</p>
<h2 class="heading" data-id="heading-5">async 及 await</h2>
<blockquote class="warning"><p>涉及面试题：async 及 await 的特点，它们的优点和缺点分别是什么？await 原理是什么？
</p></blockquote><p>一个函数如果加上 <code>async</code> ，那么该函数就会返回一个 <code>Promise</code></p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"1"</span>
}
<span class="hljs-built_in">console</span>.log(test()) <span class="hljs-comment">// -> Promise {<resolved>: "1"}</span>
</code></pre><p><code>async</code> 就是将函数返回值使用 <code>Promise.resolve()</code> 包裹了下，和 <code>then</code> 中处理返回值一样，并且 <code>await</code> 只能配套 <code>async</code> 使用</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">let</span> value = <span class="hljs-keyword">await</span> sleep()
}
</code></pre><p><code>async</code> 和 <code>await</code> 可以说是异步终极解决方案了，相比直接使用 <code>Promise</code> 来说，优势在于处理 <code>then</code> 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 <code>then</code> 也很恶心，并且也能优雅地解决回调地狱问题。当然也存在一些缺点，因为 <code>await</code> 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 <code>await</code> 会导致性能上的降低。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-comment">// 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式</span>
<span class="hljs-comment">// 如果有依赖性的话，其实就是解决回调地狱的例子了</span>
<span class="hljs-keyword">await</span> fetch(url)
<span class="hljs-keyword">await</span> fetch(url1)
<span class="hljs-keyword">await</span> fetch(url2)
}
</code></pre><p>下面来看一个使用 <code>await</code> 的例子：</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">let</span> a = <span class="hljs-number">0</span>
<span class="hljs-keyword">let</span> b = <span class="hljs-keyword">async</span> () => {
a = a + <span class="hljs-keyword">await</span> <span class="hljs-number">10</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'2'</span>, a) <span class="hljs-comment">// -> '2' 10</span>
}
b()
a++
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'1'</span>, a) <span class="hljs-comment">// -> '1' 1</span>
</code></pre><p>对于以上代码你可能会有疑惑，让我来解释下原因</p>
<ul>
<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为 <code>await</code> 内部实现了 <code>generator</code> ，<code>generator</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
<li>因为 <code>await</code> 是异步操作，后来的表达式不返回 <code>Promise</code> 的话，就会包装成 <code>Promise.reslove(返回值)</code>，然后会去执行函数外的同步代码</li>
<li>同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 0 + 10</code></li>
</ul>
<p>上述解释中提到了 <code>await</code> 内部实现了 <code>generator</code>，其实 <code>await</code> 就是 <code>generator</code> 加上 <code>Promise</code> 的语法糖，且内部实现了自动执行 <code>generator</code>。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。</p>
<h2 class="heading" data-id="heading-6">常用定时器函数</h2>
<blockquote class="warning"><p>涉及面试题：setTimeout、setInterval、requestAnimationFrame 各有什么特点？
</p></blockquote><p>异步编程当然少不了定时器了，常见的定时器函数有 <code>setTimeout</code>、<code>setInterval</code>、<code>requestAnimationFrame</code>。我们先来讲讲最常用的<code>setTimeout</code>，很多人认为 <code>setTimeout</code> 是延时多久，那就应该是多久后执行。</p>
<p>其实这个观点是错误的，因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 <code>setTimeout</code> 不会按期执行。当然了，我们可以通过代码去修正 <code>setTimeout</code>，从而使定时器相对准确</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">let</span> period = <span class="hljs-number">60</span> * <span class="hljs-number">1000</span> * <span class="hljs-number">60</span> * <span class="hljs-number">2</span>
<span class="hljs-keyword">let</span> startTime = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime()
<span class="hljs-keyword">let</span> count = <span class="hljs-number">0</span>
<span class="hljs-keyword">let</span> end = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime() + period
<span class="hljs-keyword">let</span> interval = <span class="hljs-number">1000</span>
<span class="hljs-keyword">let</span> currentInterval = interval
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loop</span>(<span class="hljs-params"></span>) </span>{
count++
<span class="hljs-comment">// 代码执行所消耗的时间</span>
<span class="hljs-keyword">let</span> offset = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime() - (startTime + count * interval);
<span class="hljs-keyword">let</span> diff = end - <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime()
<span class="hljs-keyword">let</span> h = <span class="hljs-built_in">Math</span>.floor(diff / (<span class="hljs-number">60</span> * <span class="hljs-number">1000</span> * <span class="hljs-number">60</span>))
<span class="hljs-keyword">let</span> hdiff = diff % (<span class="hljs-number">60</span> * <span class="hljs-number">1000</span> * <span class="hljs-number">60</span>)
<span class="hljs-keyword">let</span> m = <span class="hljs-built_in">Math</span>.floor(hdiff / (<span class="hljs-number">60</span> * <span class="hljs-number">1000</span>))
<span class="hljs-keyword">let</span> mdiff = hdiff % (<span class="hljs-number">60</span> * <span class="hljs-number">1000</span>)
<span class="hljs-keyword">let</span> s = mdiff / (<span class="hljs-number">1000</span>)
<span class="hljs-keyword">let</span> sCeil = <span class="hljs-built_in">Math</span>.ceil(s)
<span class="hljs-keyword">let</span> sFloor = <span class="hljs-built_in">Math</span>.floor(s)
<span class="hljs-comment">// 得到下一次循环所消耗的时间</span>
currentInterval = interval - offset
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'时：'</span>+h, <span class="hljs-string">'分：'</span>+m, <span class="hljs-string">'毫秒：'</span>+s, <span class="hljs-string">'秒向上取整：'</span>+sCeil, <span class="hljs-string">'代码执行时间：'</span>+offset, <span class="hljs-string">'下次循环间隔'</span>+currentInterval)
setTimeout(loop, currentInterval)
}
setTimeout(loop, currentInterval)
</code></pre><p>接下来我们来看 <code>setInterval</code>，其实这个函数作用和 <code>setTimeout</code> 基本一致，只是该函数是每隔一段时间执行一次回调函数。</p>
<p>通常来说不建议使用 <code>setInterval</code>。第一，它和 <code>setTimeout</code> 一样，不能保证在预期的时间执行任务。第二，它存在执行累积的问题，请看以下伪代码</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">demo</span>(<span class="hljs-params"></span>) </span>{
setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span>)
},<span class="hljs-number">1000</span>)
sleep(<span class="hljs-number">2000</span>)
}
demo()
</code></pre><p>以上代码在浏览器环境中，如果定时器执行过程中出现了耗时操作，多个回调函数会在耗时操作结束以后同时执行，这样可能就会带来性能上的问题。</p>
<p>如果你有循环定时器的需求，其实完全可以通过 <code>requestAnimationFrame</code> 来实现</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setInterval</span>(<span class="hljs-params">callback, interval</span>) </span>{
<span class="hljs-keyword">let</span> timer
<span class="hljs-keyword">const</span> now = <span class="hljs-built_in">Date</span>.now
<span class="hljs-keyword">let</span> startTime = now()
<span class="hljs-keyword">let</span> endTime = startTime
<span class="hljs-keyword">const</span> loop = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
timer = <span class="hljs-built_in">window</span>.requestAnimationFrame(loop)
endTime = now()
<span class="hljs-keyword">if</span> (endTime - startTime >= interval) {
startTime = endTime = now()
callback(timer)
}
}
timer = <span class="hljs-built_in">window</span>.requestAnimationFrame(loop)
<span class="hljs-keyword">return</span> timer
}
<span class="hljs-keyword">let</span> a = <span class="hljs-number">0</span>
setInterval(<span class="hljs-function"><span class="hljs-params">timer</span> =></span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>)
a++
<span class="hljs-keyword">if</span> (a === <span class="hljs-number">3</span>) cancelAnimationFrame(timer)
}, <span class="hljs-number">1000</span>)
</code></pre><p>首先 <code>requestAnimationFrame</code> 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题，当然你也可以通过该函数来实现 <code>setTimeout</code>。</p>
<h2 class="heading" data-id="heading-7">小结</h2>
<p>异步编程是 JS 中较难掌握的内容，同时也是很重要的知识点。以上提到的每个知识点其实都可以作为一道面试题，希望大家可以好好掌握以上内容如果大家对于这个章节的内容存在疑问，欢迎在评论区与我互动。</p>
</div><section data-v-ecce5e7e="" class="book-comments"><div data-v-ecce5e7e="" class="box-title">留言</div><div data-v-ecce5e7e="" class="comment-box"><div data-v-1146c0e6="" data-v-ecce5e7e="" class="comment-form comment-form" id="comment"><div data-v-57c47624="" data-v-cf310dfc="" data-v-1146c0e6="" data-src="https://avatars0.githubusercontent.com/u/33979626?v=4" class="lazy avatar avatar loaded" style="background-image: url("https://avatars0.githubusercontent.com/u/33979626?v=4");"></div><textarea data-v-1146c0e6="" placeholder="评论将在后台进行审核，审核通过后对所有人可见" class="content-input" style="overflow: hidden; overflow-wrap: break-word; height: 60px;"></textarea><div data-v-1146c0e6="" class="action-box" style="display: none;"><div data-v-627e3889="" data-v-1146c0e6="" class="image-uploader image-uploader" style="display: none;"><input data-v-627e3889="" type="file" class="input"><button data-v-627e3889="" class="upload-btn"><i data-v-627e3889="" class="icon ion-image"></i><span data-v-627e3889="">上传图片</span></button></div><div data-v-1146c0e6="" class="submit-box"><span data-v-1146c0e6="" class="submit-text">Ctrl or ⌘ + Enter</span><button data-v-1146c0e6="" class="submit-btn">评论</button></div></div><!----></div></div><ul data-v-6adae277="" data-v-ecce5e7e="" st:block="commentList" class="comment-list comment-list"><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="594fb8d4f265da6c20415aec" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/594fb8d4f265da6c20415aec" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://user-gold-cdn.xitu.io/2018/10/25/166a90dcc562f8f1?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="594fb8d4f265da6c20415aec" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/594fb8d4f265da6c20415aec" target="_blank" rel="" class="username" data-v-3a6943ce="">大海本尊</a></div><div data-v-38783431="" class="position">h5 @ 家里蹲</div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">async await 解决ajax回调地狱的example没有给出</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">收起评论</span><div data-v-38783431="" class="sub-comment--arrow" style=""></div></span><span data-v-38783431="" class="date">7天前</span><!----></div><div data-v-4afc11f9="" data-v-38783431="" class="sub-comment-box sub-comment-box"><div data-v-4afc11f9="" class="sub-comment-box__top"><div data-v-4afc11f9="" class="icon-close"></div><h3 data-v-4afc11f9="">评论</h3></div><div data-v-4afc11f9="" class="sub-comment-box__inner"><div data-v-4afc11f9=""><ul data-v-4afc11f9="" class="sub-comment-list"><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="594fb8d4f265da6c20415aec" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/10/25/166a90dcc562f8f1?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="594fb8d4f265da6c20415aec" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/594fb8d4f265da6c20415aec" target="_blank" rel="" class="username" data-v-3a6943ce="">大海本尊</a></div><div data-v-6fd44370="" class="position">h5 @ 家里蹲</div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">有依赖的多个ajax</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">7天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-4afc11f9="" class="reply-form"><textarea data-v-4afc11f9="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 35px;"></textarea><button data-v-4afc11f9="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5b60ed5b51882561da216eb7" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5b60ed5b51882561da216eb7" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJicW0FYT3X8cEMGJBSzMHsVdslVzyuEiabBLkMmKGIwVHBA2SuZvVuFeGyBo5E99nxMDLse3ZLs8gA/132" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5b60ed5b51882561da216eb7" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5b60ed5b51882561da216eb7" target="_blank" rel="" class="username" data-v-3a6943ce="">Lizonghao777</a></div><div data-v-38783431="" class="position"></div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">您好，我不太懂最后的requestAnimationFrame，每次将requestAnimationFrame返回的id赋值给函数内的一个变量，返回的时候却是返回this.intervalTimer, 接收的时候是个固定值，也不能起到取消定时器的效果。我不太明白，望解答</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">收起评论</span><div data-v-38783431="" class="sub-comment--arrow" style=""></div></span><span data-v-38783431="" class="date">13天前</span><!----></div><div data-v-4afc11f9="" data-v-38783431="" class="sub-comment-box sub-comment-box"><div data-v-4afc11f9="" class="sub-comment-box__top"><div data-v-4afc11f9="" class="icon-close"></div><h3 data-v-4afc11f9="">评论</h3></div><div data-v-4afc11f9="" class="sub-comment-box__inner"><div data-v-4afc11f9=""><ul data-v-4afc11f9="" class="sub-comment-list"><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" data-v-3a6943ce="" style="background-image: url("https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username" data-v-3a6943ce="">yck</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">代码改了</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">13天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5b60ed5b51882561da216eb7" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJicW0FYT3X8cEMGJBSzMHsVdslVzyuEiabBLkMmKGIwVHBA2SuZvVuFeGyBo5E99nxMDLse3ZLs8gA/132" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5b60ed5b51882561da216eb7" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/5b60ed5b51882561da216eb7" target="_blank" rel="" class="username" data-v-3a6943ce="">Lizonghao777</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><span data-v-6fd44370="" class="text-reply">回复<a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel=""><span data-v-6fd44370="" class="username">yck</span></a>：</span><span data-v-6fd44370="" class="content-html">改完之后，intervalTimer 也污染了全局变量，这样不太好吧</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">13天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5b60ed5b51882561da216eb7" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJicW0FYT3X8cEMGJBSzMHsVdslVzyuEiabBLkMmKGIwVHBA2SuZvVuFeGyBo5E99nxMDLse3ZLs8gA/132" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5b60ed5b51882561da216eb7" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/5b60ed5b51882561da216eb7" target="_blank" rel="" class="username" data-v-3a6943ce="">Lizonghao777</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><span data-v-6fd44370="" class="text-reply">回复<a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel=""><span data-v-6fd44370="" class="username">yck</span></a>：</span><span data-v-6fd44370="" class="content-html">兄弟，都改了两次了，还改成了个取消不了的定时器。</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">12天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" data-v-3a6943ce="" style="background-image: url("https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username" data-v-3a6943ce="">yck</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><span data-v-6fd44370="" class="text-reply">回复<a data-v-6fd44370="" href="https://juejin.im/user/5b60ed5b51882561da216eb7" target="_blank" rel=""><span data-v-6fd44370="" class="username">Lizonghao777</span></a>：</span><span data-v-6fd44370="" class="content-html">那个标志位本来就不是用于取消的，这个定时器一开始就没取消的功能</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">11天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" data-v-3a6943ce="" style="background-image: url("https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username" data-v-3a6943ce="">yck</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><span data-v-6fd44370="" class="text-reply">回复<a data-v-6fd44370="" href="https://juejin.im/user/5b60ed5b51882561da216eb7" target="_blank" rel=""><span data-v-6fd44370="" class="username">Lizonghao777</span></a>：</span><span data-v-6fd44370="" class="content-html">你要实现取消，我把代码改成可以取消的了</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">11天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-4afc11f9="" class="reply-form"><textarea data-v-4afc11f9="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 35px;"></textarea><button data-v-4afc11f9="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5b38911ee51d4558d8433f25" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5b38911ee51d4558d8433f25" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://avatars3.githubusercontent.com/u/33921398?v=4" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5b38911ee51d4558d8433f25" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5b38911ee51d4558d8433f25" target="_blank" rel="" class="username" data-v-3a6943ce="">不精通js不找对象</a></div><div data-v-38783431="" class="position">广东东软学院</div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">感觉还是看不够</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">评论</span><div data-v-38783431="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-38783431="" class="date">13天前</span><!----></div><!----></div><!----></div></li><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5b4c427d6fb9a04f8214fa51" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5b4c427d6fb9a04f8214fa51" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://user-gold-cdn.xitu.io/2018/12/24/167de128d95a4587?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5b4c427d6fb9a04f8214fa51" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5b4c427d6fb9a04f8214fa51" target="_blank" rel="" class="username" data-v-3a6943ce="">吐司吐司</a></div><div data-v-38783431="" class="position">前端</div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套 async 使用
应该是说 awit吧...第一个词写串了 感觉别扭 如果我说错了...请忽视我...</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">收起评论</span><div data-v-38783431="" class="sub-comment--arrow" style=""></div></span><span data-v-38783431="" class="date">14天前</span><!----></div><div data-v-4afc11f9="" data-v-38783431="" class="sub-comment-box sub-comment-box"><div data-v-4afc11f9="" class="sub-comment-box__top"><div data-v-4afc11f9="" class="icon-close"></div><h3 data-v-4afc11f9="">评论</h3></div><div data-v-4afc11f9="" class="sub-comment-box__inner"><div data-v-4afc11f9=""><ul data-v-4afc11f9="" class="sub-comment-list"><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" data-v-3a6943ce="" style="background-image: url("https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username" data-v-3a6943ce="">yck</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">没写错</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">14天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-4afc11f9="" class="reply-form"><textarea data-v-4afc11f9="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 35px;"></textarea><button data-v-4afc11f9="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5c19c313f265da61290a1f77" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5c19c313f265da61290a1f77" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLVAq0Ov24wHW3xXNToa6YbAJ8HpISpZ0EbmSdysbX5JOamvySd8dGmrQRwJmdcqQicwyUn0cFB5nw/132" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="5c19c313f265da61290a1f77" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/5c19c313f265da61290a1f77" target="_blank" rel="" class="username" data-v-3a6943ce="">闻东</a></div><div data-v-38783431="" class="position"></div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">我觉得可以说一下 await 的同步只是在 async 函数里同步，但并不会阻塞其他外部代码的执行。而这也是 await 必须放在 async 函数里的原因。</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">收起评论</span><div data-v-38783431="" class="sub-comment--arrow" style=""></div></span><span data-v-38783431="" class="date">18天前</span><!----></div><div data-v-4afc11f9="" data-v-38783431="" class="sub-comment-box sub-comment-box"><div data-v-4afc11f9="" class="sub-comment-box__top"><div data-v-4afc11f9="" class="icon-close"></div><h3 data-v-4afc11f9="">评论</h3></div><div data-v-4afc11f9="" class="sub-comment-box__inner"><div data-v-4afc11f9=""><ul data-v-4afc11f9="" class="sub-comment-list"><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="57ecb156a0bb9f0058e68b62" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://leancloud-gold-cdn.xitu.io/eATNuVMFA0T2UIjDDTNmOQB?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="57ecb156a0bb9f0058e68b62" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/57ecb156a0bb9f0058e68b62" target="_blank" rel="" class="username" data-v-3a6943ce="">stone_</a></div><div data-v-6fd44370="" class="position">前端工程师</div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">赞成</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">13天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5b6109d9e51d455d94718d82" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJBzcWHFreCY0YvBAEsml798tkPIJx7V7b3327SlNGn7THBIR297nyG4kWCPzduuXALW88Ef5m7Hg/132" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5b6109d9e51d455d94718d82" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/5b6109d9e51d455d94718d82" target="_blank" rel="" class="username" data-v-3a6943ce="">Engel</a></div><div data-v-6fd44370="" class="position">落魄的前端开发</div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">我也是这样理解的，在外部还是先执行了a++,而后才是b()</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">2天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-4afc11f9="" class="reply-form"><textarea data-v-4afc11f9="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 35px;"></textarea><button data-v-4afc11f9="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="59ddd77051882578b70db4b3" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/59ddd77051882578b70db4b3" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIKkAicLZwkJm7xWetlhjodOIwiclibVKicgWmRUXwiaCoKRjpndOzHonONU8MXOYciazZWGUjz05F8wrQg/0" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="59ddd77051882578b70db4b3" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/59ddd77051882578b70db4b3" target="_blank" rel="" class="username" data-v-3a6943ce="">Mraz</a></div><div data-v-38783431="" class="position"></div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">不错</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">评论</span><div data-v-38783431="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-38783431="" class="date">21天前</span><!----></div><!----></div><!----></div></li><li data-v-6adae277="" class="item"><div data-v-38783431="" data-v-6adae277="" class="comment"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="58a06a6d8d6d81006c9a9324" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/58a06a6d8d6d81006c9a9324" target="_blank" rel="" data-v-3a6943ce=""><div data-v-57c47624="" data-v-cf310dfc="" data-v-38783431="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-38783431="" class="content-box"><div data-v-38783431="" class="header"><div data-v-38783431="" class="user-info"><div data-v-3a6943ce="" data-v-38783431="" st:block="userPopover" st:state="58a06a6d8d6d81006c9a9324" class="user-popover-box"><!----><a data-v-38783431="" href="https://juejin.im/user/58a06a6d8d6d81006c9a9324" target="_blank" rel="" class="username" data-v-3a6943ce="">前端小白一号</a></div><div data-v-38783431="" class="position">前端</div></div></div><div data-v-38783431="" class="content"><!----><span data-v-38783431="" class="content-html">async 和await 的那个demo 最后a应该输出是11吧</span><!----></div><div data-v-38783431="" class="footer"><button data-v-38783431="" class="like-btn"><i data-v-38783431="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-38783431="">0</span></button><span data-v-38783431="" class="sub-comment-btn text-pointer"><span data-v-38783431="" class="title">收起评论</span><div data-v-38783431="" class="sub-comment--arrow" style=""></div></span><span data-v-38783431="" class="date">1月前</span><!----></div><div data-v-4afc11f9="" data-v-38783431="" class="sub-comment-box sub-comment-box"><div data-v-4afc11f9="" class="sub-comment-box__top"><div data-v-4afc11f9="" class="icon-close"></div><h3 data-v-4afc11f9="">评论</h3></div><div data-v-4afc11f9="" class="sub-comment-box__inner"><div data-v-4afc11f9=""><ul data-v-4afc11f9="" class="sub-comment-list"><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" data-v-3a6943ce="" style="background-image: url("https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username" data-v-3a6943ce="">yck</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">不要凭空想，最好实践证明，这段代码你在浏览器中执行一下就知道结果了。</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">1月前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5708c20971cfe400543ef9e7" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://user-gold-cdn.xitu.io/2018/4/18/162d9683c5d9533d?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="5708c20971cfe400543ef9e7" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/5708c20971cfe400543ef9e7" target="_blank" rel="" class="username" data-v-3a6943ce="">Linmi</a></div><div data-v-6fd44370="" class="position">导游 @ 掘金</div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">![](<a href="https://link.juejin.im/?target=https%3A%2F%2Fws3.sinaimg.cn%2Flarge%2F006tNbRwly1fxvp63to4gj30ji0as756.jpg" target="_blank" rel="nofollow noopener noreferrer">https://ws3.sinaimg.cn/large/006tNbRwly1fxvp63to4gj30ji0as756.jpg</a>)</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">1月前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="58a06a6d8d6d81006c9a9324" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="58a06a6d8d6d81006c9a9324" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/58a06a6d8d6d81006c9a9324" target="_blank" rel="" class="username" data-v-3a6943ce="">前端小白一号</a></div><div data-v-6fd44370="" class="position">前端</div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">我知道原因了。。。我先执行了b(),再执行了a++ 哈哈。。。</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">1月前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-4afc11f9="" class="item"><div data-v-6fd44370="" data-v-4afc11f9="" class="sub-comment sub-comment"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="583d1cf0a22b9d006a91d18d" class="user-popover-box user-popover--avatar"><!----><div data-v-57c47624="" data-v-cf310dfc="" data-v-6fd44370="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" data-v-3a6943ce="" style="background-image: none;"></div></div><div data-v-6fd44370="" class="content-box"><div data-v-6fd44370="" class="header"><div data-v-6fd44370="" class="user-info"><div data-v-3a6943ce="" data-v-6fd44370="" st:block="userPopover" st:state="583d1cf0a22b9d006a91d18d" class="user-popover-box user-popover--info"><!----><a data-v-6fd44370="" href="https://juejin.im/user/583d1cf0a22b9d006a91d18d" target="_blank" rel="" class="username" data-v-3a6943ce="">Vagrant</a></div><div data-v-6fd44370="" class="position"></div></div></div><div data-v-6fd44370="" class="content"><!----><span data-v-6fd44370="" class="content-html">Generator 函数那个例子中,如果不传参返回的是NaN把 不是undefined</span><!----></div><div data-v-6fd44370="" class="footer"><span data-v-6fd44370="" class="date">6天前</span><a data-v-6fd44370="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-4afc11f9="" class="reply-form"><textarea data-v-4afc11f9="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 35px;"></textarea><button data-v-4afc11f9="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><!----></ul></section></div></div><!----><!----></div></div><div data-v-06852630="" data-v-25b273c2="" class="book-handle book-direction" style=""><div data-v-06852630="" class="step-btn step-btn--prev"><img data-v-06852630="" src="./5.JS 异步编程及常考面试题_files/prev.87ad47e.svg"></div><div data-v-06852630="" class="step-btn step-btn--next"><img data-v-06852630="" src="./5.JS 异步编程及常考面试题_files/next.54d8a35.svg"></div><!----><!----></div><!----></div></div></section><!----><!----><!----><div data-v-2a6f6ec0="" data-v-25b273c2="" class="image-viewer-box"><!----></div></div><!----></div>
<script type="text/javascript" src="./5.JS 异步编程及常考面试题_files/runtime.24cd77f11899da1ef6dd.js"></script><script type="text/javascript" src="./5.JS 异步编程及常考面试题_files/0.2c5447c62a349d40ad0f.js"></script><script type="text/javascript" src="./5.JS 异步编程及常考面试题_files/1.8a1ec2e286c0cc0327eb.js"></script>
</body></html>