一、问题
在学习任务队列和事件循环之前,来看一个for循环中调用setTimeout的输出问题。
for(var i = 0; i < 10; i++){
setTimeout(()=>{
console.log(i);
}, 1000)
}
/**
* 实际输出:
* (大概1s后),输出:
* 10
* 10
* 10
* 10
* 10
* 10
* 10
* 10
* 10
* 10
*/
我们期望的结果应该是每隔1s,依次输出1、2、3……9,然而实际输出确实1s后同时输出10个10!这是为什么呢?那么接下来学习了JavaScript中的任务队列和事件循环后,答案就会揭晓。
二、任务队列与事件循环
我们来看看js的事件执行机制:
我们知道js是单线程的:
JS作为浏览器的脚本语言,主要的用途就是与用户互动,操作dom,这也是根本原因决定JS是单线程的原因。 设想一个线程在DOM上添加元素,而另一个线程删除了这个节点,那这个时候应该听谁的?
2.1 同步任务与异步任务
在JavaScript中,所有任务可以分为两种,一种是同步任务,一种是异步任务。
- 同步任务:同步任务是在
主线程
(这个线程用来解释和执行 JavaScript 代码)上排队执行的任务。 - 异步任务:不进入主线程、而进入
任务队列
的任务。只有当主线程上的所有同步任务执行完毕之后,主线程才会读取任务队列,将任务放到执行栈,开始执行任务。(例如:ajax请求、io操作、setTimeout等事件调用的回调函数)
2.2 任务队列
当遇到计时器(setTimeout)、DOM事件监听或者是网络请求的任务时,JS引擎会将它们直接交给 webapi
,也就是浏览器提供的相应线程(如定时器线程为setTimeout计时、异步http请求线程处理网络请求)去处理,而JS引擎线程继续后面的其他任务,这样便实现了 异步非阻塞。
定时器触发线程也只是为 setTimeout(…, 1000) 定时而已,时间一到
(1s过后),还会把它对应的回调函数(callback)交给 任务队列
去维护,JS引擎线程会在适当的时候去任务队列取出任务并执行。
所以我们可以说:任务队列存储了来自webapi
的回调函数,这些函数等待被系统调用到执行栈
(也就是主线程)上去运行。
2.3 事件循环(event loop)
js引擎遇到一个异步事件后并不会一直等待其返回结果,而是会将这个事件挂起(交给webapi处理),继续执行执行栈中的其他任务。当一个异步事件返回结果后(例如延时时间到了、ajax得到结果了等),js会将这个事件加入与当前执行栈不同的另一个队列,我们称之为任务(事件)队列。被放入任务队列不会立刻执行其回调,而是等待当前执行栈中的所有任务都执行完毕, 主线程处于闲置状态时,主线程会去查找事件队列是否有任务。如果有,那么主线程会从中取出排在第一位的事件,并把这个事件对应的回调放入执行栈中,然后执行其中的同步代码…,如此反复,这样就形成了一个无限的循环。这就是这个过程被称为“事件循环(Event Loop)”的原因。
来简述一下setTimeout中的输出事件的执行:
- 首先在
主线程
上,运行到setTimeout函数时,把它交给webapi处理。 wepapi
对setTimeout函数进行处理,即1s后,setTimeout的延时任务完成,应该调用回调函数(输出)了。但并不会立即将回调函数送入主线程,不然就会乱套了,得排队。- 1s后,webapi将setTimeout(consloe.log(i))交给任务队列,此时setTimeout函数在
任务队列
中排队。 - 当
主线程
中所有任务完成后,此时将任务队列的排第一事件(setTimeout)取出来
放到执行栈中去执行,运行其中的同步函数(回调函数)。 - 当输出运行完以后,如果任务队列不为空,又将排第一的事件取出来执行,如此往复,就形成了上述的
事件循环(event loop)
。
三、解决
了解了任务队列和事件循环等,来解决一下博客开头提出的问题吧。
首先分析一下为什么:
- 同时输出问题:我们知道for循环的运行时间是可以忽略不记的,所以几乎同时10个setTimeout函数被交给了webapi处理,那么这10个setTimeout的延时也可以认为是同1s中,所以他们10个1s后几乎同时从webapi进入任务队列等待被执行,但是还是要排队哦,所以我们得让每个setTimeout得延时不一样。
- 都输出10问题:for循环结束时,i已经变成10了,而延时函数得回调函数执行一定是在for循环之后的,因为for循环是同步任务。所以当延时函数的回调函数被执行时,输出的i是已经变成10了。
3.1 解决同时输出
for(var i = 0; i < 10; i++){
setTimeout(()=>{
console.log(i);
}, 1000*i)
}
/**
* 实际输出:
* 输出:
* 10(立刻输出)
* 10(1s)
* 10(2s)
* 10(3s)
* 10(4s)
* 10(5s)
* 10(6s)
* 10(7s)
* 10(8s)
* 10(9s)
*/
3.2 解决全输出10问题
使用let
定义i,此时i的作用域便不是全局了。
for(let i = 0; i < 10; i++){
setTimeout(()=>{
console.log(i);
}, 1000*i)
}
/**
* 实际输出:
* 输出:
* 0(立刻输出)
* 1(1s)
* 2(2s)
* 3(3s)
* 4(4s)
* 5(5s)
* 6(6s)
* 7(7s)
* 8(8s)
* 9(9s)
*/