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