Javascript单线程

JavaScript作为一种脚本语言，其本身是单线程的，也就是说同一时间只能做一件事。其原因是作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，就会造成错误。

任务队列

单线程意味着所有任务的执行都需要排队，如果其中一个任务执行很慢，例如IO设备，就会导致整个的阻塞。因此JavaScript有一种机制，可以把阻塞的任务挂起，等到返回结果再执行。

JavaScript的任务分为两种，一种叫同步任务，一种叫异步任务。同步任务在主线程上执行，而异步任务是不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

异步执行的机制如下

同步任务都在主线程执行，形成一个执行栈（excution context stack）
主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
以上三步主线程不断重复执行

事件和回调函数

任务队列是一个事件的队列（也可理解为消息队列），I/O设备完成一项任务就像任务队列中添加一个事件来表示任务可以进入执行栈。

任务队列中的事件还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入”任务队列”，等待主线程读取。回调函数就是挥别主线程挂起的代码，。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

Event Loop

主线程不断从任务队列中读取事件，这个过程是循环不断的，称之为Event loop。

上图中，js在运行是生成堆和栈，栈中调用了各种api然后这些事件就放在了任务队列中。只要栈中的代码执行完毕，主线程就会去读取”任务队列”，依次执行那些事件所对应的回调函数。

定时器

任务队列除了存有异步任务还可以放定时器，定时器中的代码会隔一段指定的事件后再执行。定时器分为两种，setTimeout()和setInterval().它们的内部运行机制完全一样，区别在于前者指定的代码是一次性执行，后者则为反复执行。

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log('i: ',i);
    }, 1000);
}

console.log(i);
//输出
5
i:  5
i:  5
i:  5
i:  5
i:  5

由于setTimeout是回调函数所以循环中它并不会执行，而是进入任务队列中，相当于向任务队列中塞了5个函数，循环中的i也不会传参。因此最后执行回调函数的时候，全局变量i已经变为5，所以输出5个5。

改写一下：

let

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log('i: ',i);
    }, 1000);
}
//输出
i is not defined
2:  0
2:  1
2:  2
2:  3
2:  4
//let所声明的变量，只在let命令所在的代码块内有效。

IIFE

for (var i = 0; i < 5; i++) {
    setTimeout((function() {
        console.log('i: ',i);
    })(i), 1000);
}