前段时间公司在开会的时候提到了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”
以上这些都可以使用一个很有趣的工具来可视化查看 可视化查看执行队列情况
如有错误，请指出，谢谢
