目录

一、任务队列与事件循环

1.1 同步任务与异步任务

1.2 任务队列

1.3 事件循环(event loop)

二、举例

三、解决

3.1 解决同时输出

3.2 解决全输出10问题

首先我们都知道JS是单线程的。

JS作为浏览器的脚本语言，主要的用途就是与用户互动，操作dom，这也是根本原因决定JS是单线程的原因。 设想一个线程在DOM上添加元素，而另一个线程删除了这个节点，那这个时候应该听谁的？

一、任务队列与事件循环

1.1 同步任务与异步任务

在JavaScript中，所有任务可以分为两种，一种是同步任务，一种是异步任务。

• 同步任务：同步任务是在主线程(这个线程用来解释和执行 JavaScript 代码)上排队执行的任务。
• 异步任务：不进入主线程、而进入任务队列的任务。只有当主线程上的所有同步任务执行完毕之后，主线程才会读取任务队列，将任务放到执行栈，开始执行任务。（例如：ajax请求、io操作、setTimeout等事件调用的回调函数）

1.2 任务队列

当遇到计时器(setTimeout)、DOM事件监听或者是网络请求的任务时，JS引擎会将它们直接交给 webapi，也就是浏览器提供的相应线程（如定时器线程为setTimeout计时、异步http请求线程处理网络请求）去处理，而JS引擎线程继续后面的其他任务，这样便实现了 异步非阻塞。

定时器触发线程也只是为 setTimeout(…, 1000) 定时而已，时间一到(1s过后)，还会把它对应的回调函数(callback)交给 任务队列 去维护，JS引擎线程会在适当的时候去任务队列取出任务并执行。

所以我们可以说：任务队列存储了来自webapi的回调函数，这些函数等待被系统调用到执行栈（也就是主线程）上去运行。

1.3 事件循环(event loop)

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起（交给webapi处理），继续执行执行栈中的其他任务。当一个异步事件返回结果后（例如延时时间到了、ajax得到结果了等），js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为任务（事件）队列。被放入任务队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

来简述一下setTimeout中的输出事件的执行：

1. 首先在主线程上，运行到setTimeout函数时，把它交给webapi处理。
2. wepapi对setTimeout函数进行处理，即1s后，setTimeout的延时任务完成，应该调用回调函数(输出)了。但并不会立即将回调函数送入主线程，不然就会乱套了，得排队。
3. 1s后，webapi将setTimeout(consloe.log(i))交给任务队列，此时setTimeout函数在任务队列中排队。
4. 当主线程中所有任务完成后，此时将任务队列的排第一事件（setTimeout）取出来放到执行栈中去执行，运行其中的同步函数（回调函数）。
5. 当输出运行完以后，如果任务队列不为空，又将排第一的事件取出来执行，如此往复，就形成了上述的事件循环（event loop）。

二、举例

for(var i = 0; i { console.log(i);    }, 1000)}/** * 实际输出： * （大概1s后），输出： * 10 * 10 * 10 * 10 * 10 * 10 * 10 * 10 * 10 * 10 */

三、解决

了解了任务队列和事件循环等，首先分析一下为什么：

1. 同时输出问题：我们知道for循环的运行时间是可以忽略不记的，所以几乎同时10个setTimeout函数被交给了webapi处理，那么这10个setTimeout的延时也可以认为是同1s中，所以他们10个1s后几乎同时从webapi进入任务队列等待被执行，但是还是要排队哦，所以我们得让每个setTimeout得延时不一样。
2. 都输出10问题：for循环结束时，i已经变成10了，而延时函数得回调函数执行一定是在for循环之后的，因为for循环是同步任务。所以当延时函数的回调函数被执行时，输出的i是已经变成10了。

3.1 解决同时输出

 for(var i = 0; i {        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 {        console.log(i);    }, 1000*i)}/** * 实际输出： * 输出： * 0(立刻输出) * 1(1s) * 2(2s) * 3(3s) * 4(4s) * 5(5s) * 6(6s) * 7(7s) * 8(8s) * 9(9s) */

艺术系歌词下载吧