资讯专栏INFORMATION COLUMN

js执行机制

joyvw / 2540人阅读

摘要:在上面代码中,进入宏任务,并将注册为宏任务放入队列,接着执行哈哈哈,遇到直接执行,回调函数放置微任务队列,接着执行嘻嘻嘻,第二个如上。

在实际开发中,总是遇到请求结束后,想要把请求得到数据赋值给某一个对象或者变量,如果没有在请求的回调函数中赋值,而是在请求语句下面赋值,我们会发现请求得到数据正常,但是赋值后的变量是undefined。这是为什么呢?
首先,我们要了解一个概念,就是同步与异步。众所周知,js是单线程语言,也就是说,js一次只能执行一个任务,如果有多个任务的话呢,那就按照任务的顺序依次执行。但是如果其中某一个任务耗费大量时间,比如陷入死循环,那么其他任务都不能执行,会造成浏览器无响应。那么js是如何解决的呢?那就是将任务分为同步和异步模式进行执行。同步如上,异步呢是指,拥有大于一个的回调函数,任务在执行结束时不是执行下一个任务而是执行回调函数,那么有人可能会有疑问,这样做与同步有什么区别呢?区别在于,后一个任务不用等前一个任务完全执行后再去执行。因此我们得到的程序执行顺序不是任务的排列顺序。

setTimeout(function(){
    console.log("第一个延时调用");
});
console.log("哈哈哈");
new Promise(function(resolve){
    console.log("promise任务吗");
    resolve();
}).then(function(){
    console.log("回调函数???")
});
console.log("嘻嘻嘻");
setTimeout(function(){
    console.log("第二个延时调用");
});

执行结果是什么呢?
哈哈哈
promise任务吗
嘻嘻嘻
回调函数???

第一个延时调用
第二个延时调用
为什么是这样呢?为什么setTimeout会在最后才执行,明明是0ms啊。
是因为除了同步异步模式外,我们对任务还有进一步的划分,宏任务微任务
宏任务:包括整体代码script,setTimeout,setInterval
微任务:Promise,process.nextTick
在执行时,进入宏任务后,开始第一次循环,接着执行所有微任务,然后在进行宏任务的下次循环。
在上面代码中,进入宏任务,并将setTimeout注册为宏任务放入队列,接着执行哈哈哈,遇到new Promise 直接执行,回调函数放置微任务队列,接着执行嘻嘻嘻,第二个setTimeout如上。接着执行微任务,这里仅有嘻嘻嘻。最后进入下次宏任务。

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

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

相关文章

  • 10分钟理解JS引擎的执行机制

    摘要:深入理解引擎的执行机制灵魂三问为什么是单线程的为什么需要异步单线程又是如何实现异步的呢中的中的说说首先请牢记点是单线程语言的是的执行机制。 深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2...

    zzbo 评论0 收藏0
  • 深入理解js引擎的执行机制

    摘要:深入理解引擎的执行机制最近在反省,很多知识都是只会用,不理解底层的知识。在阅读之前,请先记住两点是单线程语言的是的执行机制。所以,是存在异步执行的,比如单线程是怎么实现异步的场景描述通过事件循环,所以说,理解了机制,也就理解了的执行机制啦。 深入理解js引擎的执行机制 最近在反省,很多知识都是只会用,不理解底层的知识。所以在开发过程中遇到一些奇怪的比较难解决的bug,在思考的时候就会收...

    feng409 评论0 收藏0
  • 前端进阶系列(八):JS执行机制

    摘要:一直以来,对的执行机制都是模棱两可,知道今天看了文章这一次,彻底弄懂执行机制和的规范和实现,才对的执行机制有了深入的理解,下面是我的学习总结。个要点是单线程语言是的执行机制,为了实现主线程的不阻塞,就这么诞生了。 一直以来,对JS的执行机制都是模棱两可,知道今天看了文章—《这一次,彻底弄懂JavaScript执行机制》和《Event Loop的规范和实现》,才对JS的执行机制有了深入的...

    JackJiang 评论0 收藏0
  • Event Loop - JS执行机制

    摘要:心塞塞根据规范,事件循环是通过任务队列的机制来进行协调的。等便是任务源,而进入任务队列的是他们指定的具体执行任务回调函数。然后当前本轮的结束,主线程可以继续取下一个执行。 依然是:经济基础决定上层建筑。 说明 首先,旨在搞清常用的同步异步执行机制 其次,暂时不讨论node.js的Event Loop执行机制,以下关于浏览器的Event Loop执行机制 最后,借鉴了很多前辈的研究文...

    muddyway 评论0 收藏0
  • JS执行机制

    摘要:事件表每次调用函数或执行异步操作时,都会将其添加到事件表中,事件表负责记录每个事件完成后执行的回调函数,并监听事件,事件完成后会把事件的回调函数发送到事件队列。事件队列事件队列接收来自事件表的回调函数,并根据顺序执行。 前言 先上一段代码,可以根据自己之前对JS执行机制的理解,进行分析 console.log(script start); setTimeout(function() ...

    wow_worktile 评论0 收藏0
  • Javascript系列之javascript机制

    摘要:异步任务必须指定回调函数,当异步任务从任务队列回到执行栈,回调函数就会执行。事件循环主线程从任务队列中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。 参考链接:这一次,彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程,JS运行机制...

    13651657101 评论0 收藏0

发表评论

0条评论

joyvw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<