JavaScript中怎么实现事件循环

今天就跟大家聊聊有关JavaScript中怎么实现事件循环,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网络空间、营销软件、网站建设、鄂托克前网站维护、网站推广。

1.Main.js 执行

JavaScript中怎么实现事件循环

2.调用secondFunction

JavaScript中怎么实现事件循环

3.调用secondFunction引起调用firstFunction

JavaScript中怎么实现事件循环

4.执行firstFunction,输出“I'm  first!”,接着由于firstFunction执行完毕,firstFunction会从调用栈中弹出。

JavaScript中怎么实现事件循环

5.secondFunction继续执行,输出“I'm  second!”。接着由于secondFunction执行完毕,secondFunction从调用栈中弹出。

JavaScript中怎么实现事件循环

6.***,main.js执行完毕,也从栈中弹出。

JavaScript中怎么实现事件循环

Event Loop:事件循环

了解了call stack在JavaScript引擎中是如何工作了之后,来看下如何使用异步回调函数来避免blocking  代码。(译者注:回调函数有多种实现方式,最常见的有:在函数中使用函数作用参数etc。)setTimeout就是使用的回调函数。看个栗子:

/* Within main.js */  var firstFunction = function () {    console.log("I'm first!"); };  var secondFunction = function () {    setTimeout(firstFunction, 5000);  console.log("I'm second!"); };  secondFunction();  /* Results:  * => I'm second!  * (And 5 seconds later)  * => I'm first!  */

下边模拟调用栈(在上个栗子的基础上我们这次推前点)

1....

2.secondFunction调用setTimeout,setTimeout入栈:

JavaScript中怎么实现事件循环

3.setTimeout执行后,浏览器会把setTimeout的回调函数(在这个栗子中是firstFunction)放到Event Table中。Event  Table 就是个注册站:调用栈让Event Table注册一个函数,该函数会在5秒之后被调用。当指定的事情发生时,Event  Table会将这个函数移到Event Queue。Event Queue其实就是个缓冲区域,这里的函数等着被调用并移到调用栈。

问题来了,什么时候函数会从Event Queue移到调用栈咧?JavaScript引擎依据一条规则:有一个monitoring  process(不知翻译成啥好)会持续不断地检查调用栈是否为空,一旦为空,它会检查Event  Queue里边是否有等待被调用的函数。如果存在,它就会调用这个Queue中***个函数并将其移到调用栈中。如果Event  Queue为空,那么这个monitoring process会继续不定期的检查。这一整个过程就是Event Loop。

JavaScript中怎么实现事件循环

4.一旦回调函数加入到Event表中,代码不会被block住,浏览器不会等待5秒之后再继续处理接下去的代码,相反,浏览器继续执行secondFunction的下一行代码,console.log。

JavaScript中怎么实现事件循环

5.在background,Event Table会持续地监测是否有事件触发,将函数移到Event  Queue中。在这个栗子中,secondFunction执行完毕,接着main.js也执行完毕。

JavaScript中怎么实现事件循环

6.从回调函数被放入Event Table后5秒钟,Event Table把firstFucntion移到Event Queue中。

JavaScript中怎么实现事件循环

7.由于事件循环持续地监测调用栈是否已空,此时它一注意到调用栈空了,就调用firstFunction并创建一个新的调用栈。

JavaScript中怎么实现事件循环

8.一旦firstFunction执行完毕,调用栈空了,Event Table里也没有注册函数,Event Queue也为空。

JavaScript中怎么实现事件循环

看完上述内容,你们对JavaScript中怎么实现事件循环有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


当前文章:JavaScript中怎么实现事件循环
文章路径:http://myzitong.com/article/jjjpdc.html