首页 > 其他分享 >js 事件循环

js 事件循环

时间:2023-09-15 18:47:17浏览次数:28  
标签:function 异步 console log js 任务 循环 事件 执行

JavaScript 是一门单线程语言,单线程意味同一时间只能做一件事,这样没有造成堵塞就是因为事件循环。

在javascript中所有任务可以分为同步任务,异步任务。

同步任务:立即执行的任务,一般按照执行顺序直接进入主线程执行

异步任务: 异步执行的任务,比如setTimeout,ajax请求等。

当执行一段代码时,会将同步代码按顺序排在执行栈中;然后依次执行里面的函数;将遇到异步任务时会放入任务队列中,每个任务关联一个回调函数,等主线程任务全部执行完毕,会去任务队列取出已完成的异步任务回调推入执行栈,上述过程不断重复就是事件循环。

 异步任务又可分为微任务和宏任务

 常见微任务:

  • promise.then()、promise.catch()
  • new MutaionObserver()
  • process.nextTick()
常见宏任务:
  • setTimeout()
  • setInterval()
  • setImmediate()
  • postMessae

   事件循环的过程中,微任务执行在在执行栈全部执行完毕之后,任务队列之前。

   

 async function async1() {
      console.log("1");
      await async2();
      console.log("2"); //微任务
    }
    async function async2() {
      console.log("3");
    }
    console.log("4");
    setTimeout(function () {
      console.log("5"); //宏任务
    }, 1000);

    async1();
    new Promise(function (resolve) {
      console.log("6");
      resolve();
    }).then(function () {
      // 微任务
      console.log("7");
    });

  上面的输出顺序:

      1.按照从上到下顺序,首先执行同步 console.log("4");输出4

      2.执行async1();输出1

      3. .执行async2();输出3,await 后面代码是微任务

      4. 执行Promise,输出6,.then为微任务

      5.同步执行完,按照顺序执行微任务 输出2 ,7

      6.微任务执行完,执行宏任务,输出5

  

 
 

标签:function,异步,console,log,js,任务,循环,事件,执行
From: https://www.cnblogs.com/hardmeng/p/17700429.html

相关文章

  • web 前端 tips:js 继承 —— 组合继承
    上篇文章给大家分享了js继承中的组合继承web前端tips:js继承——组合继承今天给大家分享一下js继承中的原型式继承原型式继承JavaScript的原型式继承是一种基于对象的继承方式,通过复制一个对象的属性和方法来创建一个新对象,并将原对象作为新对象的原型。这种继承方式可以......
  • 十道循环题目
    1.输出所有满足下列条件的四位数.条件:个位数字加百位数字等于千位数字加上十位数字,且该该数为奇数.2.求1-100之间所有7的倍数的和,并在页面输出7+14+21+...+...=3.通过for循环实现百钱买百鸡的问题:公鸡5元每只,母鸡3元每只,小鸡3只1元,100元买一百只鸡多少种办法?4.鸡兔同笼3......
  • threejs 4纹理
     ......
  • threejs 5材质
     ......
  • HarmonyOS应用开发Web组件基本属性应用和事件
    一、Web组件概述Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。● 页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。● 页面交互:Web组件提供丰富的页面交互的方式,包括:设置前端页面深色模......
  • 使用threejs创建一个长方体
    //创建设备正方体//x1X轴坐标y1Y轴坐标item设备的信息可以把item嵌入到正方体里面h:高度privateinitQuare1(x1:any,y1:any,item:any,h:any){vargeometry=newTHREE.BoxGeometry(0.5,1,0.5);//确定颜色根据设备的状态动态显示正方体......
  • [转]全国城市邮编json格式
    使用时引入importcityfrom'./city.json'即可得到的city即可使用全国城市邮编json格式[{ "label":"北京市", "value":"110000", "children":[{ "label":"市辖区", "value":"110100&quo......
  • Dynamics CRM - 使用 JS 对字段取值、赋值、实体属性设置等
    整理下平时CRM开发中用到的一些基本的js操作取值:varoResult=Xrm.Page.getAttribute(sFieldName).getValue();varoResult=Xrm.Page.getControl(sFieldName).getAttribute().getValue();赋值:一般类型:Xrm.Page.getAttribute(sFieldName).setValue(object);OptionSe......
  • Vue——模版语法、文本指令、事件指令、属性指令、style和class、条件渲染、列表渲染
    模版语法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></head><body><divid=&......
  • How to fix Fetch TypeError in Node.js All In One
    HowtofixFetchTypeErrorinNode.jsAllInOneTypeError:terminatedatFetch.onAborted(node:internal/deps/undici/undici:11000:53)Errorundici//❌❌videourlhttps://edu.xgqfrms.xyz/dc9bb2-1733219a4a8.mp4TypeError:terminatedatFetch.onAbor......