javascript的异步执行顺序---管中窥豹

有一个经典例子：

for (var i = 0; i < 10; i++) {setTimeout(function() { console.log(i); }, 100 * i);
}

介绍一下，setTimeout会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）。

好吧，看一下结果：

很多JavaScript程序员对这种行为已经很熟悉了，但如果你很不解，你并不是一个人。大多数人期望输出结果是这样：

实际上，我们传给setTimeout的每一个函数表达式实际上都引用了相同作用域里的同一个i。
让我们花点时间思考一下这是为什么。 setTimeout在若干毫秒后执行一个函数，并且是在for循环结束后。 for循环结束后，i的值为10。所以当函数被调用的时候，它会打印出 10！

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

for (var i = 0; i < 10; i++) {// capture the current state of 'i'// by invoking a function with its current value(function(i) {setTimeout(function() { console.log(i); }, 100 * i);})(i);
}

这种奇怪的形式我们已经司空见惯了。参数 i会覆盖for循环里的i，但是因为我们起了同样的名字，所以我们不用怎么改for循环体里的代码。

这是参考：https://www.tslang.cn/docs/handbook/variable-declarations.html
这里就要问明明写在里面的，为什么还是要用立即执行函数的写法才能让他真的符合看上去那样在for循环里面乖乖执行每次获取不同的 i 呢。

JS的异步执行顺序是：
先同步后异步

异步任务队列的执行顺序是：
先微任务microtask队列，再宏任务macrotask队列

微任务包括 process.nextTick ，promise ，MutationObserver。
宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

所以是settimeout()开启了宏任务，在for循环这个同步结构执行结束之后，获取到了i ，程序结构上是嵌套在for里面的，仍然会有10个宏任务生成，但是此时的 i 变量已经是for结束之后的 i=10 了。

javascript的异步执行顺序---管中窥豹相关推荐

异步执行顺序——宏任务与微任务不同环境下的出队规则
导读 javascript是一门单线程语言,一切javascript版的多线程都是用单线程模拟出来的,所以代码执行还是顺序执行的原则,只不过编写的顺序被执行环境重新"编排"了一下而 ...
php 内部异步执行顺序,event_loop中不同异步操作的执行顺序
关于js的单线程.怎么创建一个异步任务都是老生常谈的话题了,我们今天就总结一下js不同的异步操作到底执行顺序如何. 首先我们要明白js两种任务类型,一个是macrotask(宏任务),一个是 micr ...
JavaScript：异步执行机制
使用JavaScript的开发者都知道,JS的异步执行机制在JS中占据着重要的地位,主要就是体现在回调函数以及事件方面,最近看了很多文章,将自己的一些感受和理解跟各位分享一下. 前面的博客中也有提到, ...
Ajax同步异步执行顺序问题
今天项目中碰到一个问题,大概是这样的:JS中一个方法A需要先给隐藏域赋值,然后另一个方法B再从这个隐藏域取值,获取到这个值后给接口传参然后请求数据.也就是说这两个方法需要有执行顺序,A方法先执行,然后 ...
javascript tyy的执行顺序很怪异
<script type="text/javascript"> function Test() { try { return "函数R ...
了解javascript中函数执行顺序
我个人觉得一般人不会有这种写法,但艺不压身,呵呵.希望能帮到初学的朋友!大家一起进步! 首先列举出8个例子,然后例子的解答会在文章末尾贴出! 测试代码一: <script language=&q ...
C# async/awit 嵌套异步执行顺序分析
使用非异步方法调用可异步方法(内含嵌套异步) 效果图: 代码(在控制台mian函数中运行该函数): private static void AsyncTest(){Func<Task<st ...
react学习(50)--解决异步执行顺序问题
this.props.dispatch({type: 'activity/addActivityPopup',payload: params,callback: (res) => {if (re ...
JavaScript的预编译及执行顺序
从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序. 如果说,JavaScript引擎的工作机制比较深奥是 ...

javascript的异步执行顺序---管中窥豹

javascript的异步执行顺序---管中窥豹相关推荐

最新文章

热门文章