谈一谈Javascript中setTimeout

前段时间公司在开会的时候提到了Javascript里的setTimeout，同事们的讨论很有意思，决定和大家分享一下。

话不多说，上代码

//代码块A
document.querySelector('button').onclick = function(){    /
 	setTimeout(function f1() {
        console.log('你点击了button!');
    }, 2000);
}

//代码块B
console.log("这是第一条日志");

//代码块C
setTimeout(function f2() {
    console.log("快去点击按钮吧");
}, 1000);

//代码块D
console.log("这是第二条日志");

很多人可能已经猜到了执行结果：
1.这是第一条日志

2.这是第二条日志

3.快去点击按钮吧   （延时1秒执行）

点击button 延时2秒输出“你点击了button!”

实际上执行过程是这样的的：

1.主线程执行代码块A ，发现有事件绑定，将事件注册到 Web API上

2.主线程执行代码块B   ---->输出‘这是第一条日志’

3.主线程执行代码块C，发现有延时，将代码块C的内容拿出主线程，倒计时等待执行，倒计时完毕则进入回调执行队列  

4.主线程执行代码块D（不被代码块C阻塞） --->输出‘这是第二条日志’

5.主线程全部执行完了，开始一个一个取回调执行队列的代码块来执行  --->输出'快去点击按钮!'

6.点击button时候，执行web api上之前注册的事件，发现是timeout，则倒计时等待，倒计时完毕则进入回调执行队列  

7.主线程只要空闲，则执行回调执行队列  -->输出“你点击了button”

以上这些都可以使用一个很有趣的工具来可视化查看 可视化查看执行队列情况



如有错误，请指出，谢谢