AJAX: 事件循环（举例细论）-Toy模板网

这篇具有很好参考价值的文章主要介绍了AJAX: 事件循环（举例细论）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概念：执行任务和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数的一种执行机制

原因：JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型

JS内代码如何执行：

执行同步代码，遇到异步代码就交给宿主浏览器环境执行。异步有了结果之后，把回调函数放到任务队列中排队，当调用栈空闲后，反复调用任务队列里的回调函数

案例：

console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
console.log(3)
setTimeout(() => {
  console.log(4)
}, 2000)
console.log(5)

执行过程：

AJAX: 事件循环（举例细论）,Ajax,javascript,前端,vue.js

1-JS引擎把console.log(1)放入调用栈中，执行后弹出

2-JS引擎发现setTimeout(…, 0) 是异步代码，于是将它放入宿主环境（浏览器）中，执行setTimeout(…, 0)，完成后放入任务队列中

3-JS引擎把console.log(3)放入调用栈中，执行后弹出

4-JS引擎发现setTimeout(…, 2000) 是异步代码，于是将它放入宿主环境（浏览器）中，执行setTimeout(…, 2000)要等待2s，完成后放入任务队列中

5-JS引擎把console.log(5)放入调用栈中，执行后弹出

6-此时，JS的调用栈空闲，调用任务队列中的回调函数，先调用setTimeout(…, 0)中的回调函数console.log(2) ，执行后出栈。此时，JS的调用栈再次空闲，它会保持监视任务队列情况。当2s到时，会调用setTimeout(…, 2000)中的回调函数console.log(4) ，执行后出栈。

参考：AJAX-Day04-07.事件循环_哔哩哔哩_bilibili文章来源地址https://www.toymoban.com/news/detail-595010.html

到了这里，关于AJAX: 事件循环（举例细论）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！