前端面试必问之setTimeout-原创手记-慕课网

由于Javascript的单线程机制，所以实际上大部分前端程序员，或多或少都使用过setTimeout来解决一些问题，比如你在DOM还没渲染完就无意的操作到DOM，那这个时候你可能需要用setTimeout来将操作DOM的代码拿出主线程，等待DOM渲染完再去操作它。。。等等需要setTimeout的场景很多。

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

话不多说，上代码

//Javscript代码

//代码块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”

以上这些都可以使用一个很有趣的工具来可视化查看
点击进入可视化查看执行过程
图片描述

如有错误，请指出，谢谢！