图解js运行过程
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
复制代码- 动态示意图
- 分解过程
- 第一步
- 第二步
- 第五步
- 第六步
- 第七步
- 第八步
- 第九步
- 第十步
- 第十一步
- 第十二步
- 第十三步
- 第十四步
- 第十五步
- 第十六步
扩展
- 通过了解js函数的运行过程，我们可以更好的理解在监听页面滚动事件、窗口大小改动因为它们会产生大量的函数调用在callback queue（回调队列里）等待被拉取到Call Stack栈里执行，容易阻塞页面、造成假死。使用throttle函数或debounce函数可以减少回调函数的数量,起到优化的作用。
- setTimeout的延迟触发并不会一定精确，因为回调栈里的队列为空时，才会去拉取setTimeout的函数执行，假设有的函数执行比价耗时，延迟执行的时间到了setTimeout函数也不一定会执行。