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