一、问题

在学习任务队列和事件循环之前，来看一个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是单线程的：

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)

来简述一下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)
 */