JavaScript 事件循环

kbyyd24 发布于2019-08-22 16:36 / 948人阅读

摘要：总而言之，检查调用栈是否为空，以及确定把哪个异步任务加入调用栈的这个过程就是事件循环，而实现异步的核心就是事件循环。

js是一门单线程的语言，不可能进行多线程编程，异步编程就是多线程编程一种模式，但是我们经常讲到js的异步编程，其实是伪异步，因为它是单线程的，也就是同步，只有前面的代码执行完才能执行下面的代码。所以要理解js中的异步理念，就需要了解js的运行核心--事件循环(Event loop)

为什么js会有异步呢

setTimeout(function(){
    //5秒之后执行程序
    
},5000)

我们想象一下，在同步的执行上面的代码，需要等待5秒才能执行定时器中的程序，然后在往下执行，在这5秒的过程中，浏览器没有任何反应，出现了阻塞，在用户体验上很不好。所以异步的模式就出现，为了解决浏览器非阻塞的运行。

单线程如何做到异步

js的任务分为同步和异步两种，它们的处理方式也不同，同步任务是直接在主线程上排队执行，异步任务则会被放到事件队列中，若有多个异步任务则要在事件队列中排队等待，事件队列类似一个缓冲区，任务下一步会被移到调用栈,然后主线程执行调用栈的任务。

单线程是指js引擎中负责解析执行js代码的线程只有一个主线程，即每次只能做一件事，而我们知道一个ajax请求，主线程在等待它响应的同时是会去做其它事的，浏览器先在事件表注册ajax的回调函数，响应回来后回调函数被添加到任务队列中等待执行，不会造成线程阻塞，所以说js处理ajax请求的方式是异步的。

总而言之，检查调用栈是否为空，以及确定把哪个异步任务加入调用栈的这个过程就是事件循环，而js实现异步的核心就是事件循环。

一次事件循环的步骤包括：

主线程在执行代码的时候，遇到异步任务会将它添加到一个事件队列中(可以理解为一个数组)，然后继续执行下面的代码，直到同步代码执行完，然后执行步骤2

检查事件队列是否为空，非空执行步骤3，为空则继续执行步骤2

取出事件队列中的第一个放到调用栈，然后主线程执行调用栈的任务，再执行步骤4

执行视图更新，然后回到步骤2

这就是事件循环

先看一段代码，理解一下：(面试题哦)

console.log("start")

setTimeout(function() {
  console.log("setTimeout")
}, 0)

Promise.resolve().then(function() {
  console.log("promise1")
}).then(function() {
  console.log("promise2")
})

console.log("end")

打印台输出的log顺序是什么？结合上面的步骤分析一下

最后的结果是：

start
end
promise1
pormise2
setTimeout

参考资料

Event Loop

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94496.html

什么是JavaScript 事件循环 ?

摘要：此事件队列的美妙之处在于它只是函数等待被调用和移动到调用栈的一个临时存放区域。在事件循环不断监视调用栈是否为空现在确实是空的时候调用创建一个新的调用栈来执行代码。在执行完之后进入了一个新的状态这个状态调用栈为空事件记录表为空事件队列也为空。这篇文章是对个人认为讲解　JavaScript　事件循环比较清楚的一篇英文文章的简单翻译,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 评论0 收藏0
JavaScript运行机制和事件循环

摘要：主线程不断重复上面的三步，此过程也就是常说的事件循环。所以主线程代码执行时间过长，会阻塞事件循环的执行。参考资料这一次，彻底弄懂执行机制任务队列的顺序机制事件循环搞懂异步事件轮询与中的事件循环 1. 说明读过本文章后，您能知道： JavaScript代码在浏览器中的执行机制和事件循环面试中经常遇到的代码输出顺序问题首先通过一段代码来验证你是否了解代码输出顺序，如果你不知道输出...

Ververica 2019-08-23 14:42 评论0 收藏0
总结javascript基础概念（二）：事件队列循环

摘要：而事件循环是主线程中执行栈里的代码执行完毕之后，才开始执行的。由此产生的异步事件执行会作为任务队列挂在当前循环的末尾执行。在下，观察者基于监听事件的完成情况在下基于多线程创建。主要问题： 1、JS引擎是单线程，如何完成事件循环的？ 2、定时器函数为什么计时不准确？ 3、回调与异步,有什么联系和不同？ 4、ES6的事件循环有什么变化？Node中呢？ 5、异步控制有什么难点？有什么解决方...

zhkai 2019-08-26 11:42 评论0 收藏0
JavaScript单线程事件循环(Event Loop)那些事

摘要：概述本篇主要介绍的运行机制单线程事件循环结论先在中利用运行至完成和非阻塞完成单线程下异步任务的处理就是先处理主模块主线程上的同步任务再处理异步任务异步任务使用事件循环机制完成调度涉及的内容有单线程事件循环同步执行异步执行定时器的事件循环开始 1.概述本篇主要介绍JavaScript的运行机制:单线程事件循环(Event Loop). 结论先: 在JavaScript中, 利用运行至...

Shisui 2019-08-20 16:50 评论0 收藏0
事件循环与任务队列

摘要：需要注意的是，定时器比较特殊，并没有把回调函数挂在事件循环队列中，它所做的就是设置一个定时器，当定时器到时后，环境会把你的回调函数放在事件循环中，这样，在未来某个时刻的会被取出执行。 Author: bugall Wechat: bugallF Email: 769088641@qq.com Github: https://github.com/bugall 一...

SQC 2019-08-21 11:40 评论0 收藏0
JavaScript事件循环(Event Loop)

摘要：事件循环的顺序，决定代码执行的顺序。输出第二轮事件循环正式结束三第三轮事件循环第三轮事件循环从宏任务开始。记为遇到，立即执行回调函数放入中注册，然后被分发到微任务事件队列中。 1、为什么要有事件循环？因为js是单线程的，事件循环是js的执行机制，也是js实现异步的一种方法。既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如...

dmlllll 2019-08-23 14:52 评论0 收藏0