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

js EventLoop事件循环机制

时间:2023-04-17 17:24:07浏览次数:29  
标签:resolve console log EventLoop js start 任务 循环 setTimeout

1、js是单线程语言,其事件分为:同步任务和异步任务,异步任务分为宏任务与微任务;

2、执行顺序为:同步任务(主流程任务) ---> 微任务  ----> 宏任务

先执行同步任务,遇到异步任务则放入任务队列中,等同步任务执行完毕,执行任务队列中的微任务,再执行宏任务...

主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

3、微任务主要包含:promise.then(fn)  fn即会推入微任务队列

      宏任务主要包含: setTimeout(fn1,time) fn1即会推入宏任务队列

4、执行顺序例子:

    setTimeout(() => {
            console.log('timer1');
            setTimeout(() => {
                console.log('timer3')
            }, 0)
        }, 0)
        setTimeout(() => {
            console.log('timer2')
        }, 0)
        console.log('start')
        //start\1\2\3

  

     setTimeout(() => {
            console.log('timer1');
            Promise.resolve().then(() => {
                console.log('promise')
            })
        }, 0)
        setTimeout(() => {
            console.log('timer2')
        }, 0)
        console.log('start')
        //start\1\promise\2

  

     Promise.resolve().then(() => {
            console.log('promise1');
            const timer2 = setTimeout(() => {
                console.log('timer2')
            }, 0)
        });
        const timer1 = setTimeout(() => {
            console.log('timer1')
            Promise.resolve().then(() => {
                console.log('promise2')
            })
        }, 0)
        console.log('start');
        //start/p1/t1/p2/t2

  

     const promise1 = new Promise((resolve, reject) => {
            console.log(1);
            setTimeout(() => {
                console.log("timerStart");
                resolve("success");
                console.log("timerEnd");
            }, 0);
            console.log(2);
        });
        promise.then((res) => {
            console.log(res);
        });
        console.log(4);

    //1
     //2
    //3
    //4
    //success
    //timerStart
    //timerEnd

 

标签:resolve,console,log,EventLoop,js,start,任务,循环,setTimeout
From: https://www.cnblogs.com/ducky-L/p/17326495.html

相关文章

  • 国内开源js框架
    JX(腾讯)–http://alloyteam.github.com/JXKISSY(淘宝)–http://www.kissyui.comQWrap(百度)-Tangram(百度)–http://tangram.baidu.comComo–http://www.comsome.comEdoJs–KindEditor–https://github.com/kindsoft/kindeditorNJF–http://code.google.com/p/njf......
  • js画图
    mxgraphhttp://www.mxgraph.com/ jquerydraw2dhttp://www.draw2d.org/draw2d/ wz_jsgraphics  RaphaelJShttp://raphaeljs.com/raphaeljs是一个小型的JavaScript库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作raphaelj......
  • RequireJS 和 SeaJS 模块加载器
    RequireJS和SeaJS都是很不错的模块加载器,两者区别如下:1.两者定位有差异。RequireJS想成为浏览器端的模块加载器,同时也想成为Rhino/Node等环境的模块加载器。SeaJS则专注于Web浏览器端,同时通过Node扩展的方式可以很方便跑在Node服务器端2.两者遵循的标准有差异。Re......
  • LABjs异步加载组件
    加载外部js的方法大致有这么几种:方法说明XHREval     通过Ajax方式获取代码,并通过eval方式执行代码。XHRInjection     通过Ajax方式获取代码,并在页面上创建一个script元素,将Ajax取得的代码注入。ScriptinIframe      通过iframe加载js。Scr......
  • IOS Swift WKWebView使用以及与JS交互
    一、SwiftWKWebView使用1、加载百度网站打开xcode,在最上方工具栏新建project注意要选Storyboard工程建好后 ViewController.swift 这个文件是编写主视图文件,改成下面importUIKitimportWebKitclassViewController:UIViewController,WKUIDelegate{varwebView:WKWe......
  • js深度拷贝
    法一:有局限性//通过js的内置对象JSON来进行数组对象的深拷贝functiondeepClone(obj:any):any{const_obj=JSON.stringify(obj),constobjClone=JSON.parse(_obj);returnobjClone;}这种简单粗暴的方法有其局限性,当值为undefined、function、symbol会在转换过程......
  • npm自定义模块及发布模块NodeJS
    在模块目录下执行:npminit(可以加--yes一键生成)新建文件index.jsvaryunan='helloyunan';module.exports=yunan;然后将文件夹放到node_modules可以用下面方法使用试试constyunan=require('huyunan');console.log('yunan',yunan);//yunanhelloyunan发布之前......
  • 使用js对tensorspace/three.js/webgl进行截图
    使用js对tensorspace/three.js/webgl进行截图问题分析场景:在右侧,是tensorspace库使用three.js调用webgl对模型进行渲染的画面。我需要使用js对右侧画面进行截图,并保存至本地用于分析。问题:对webgl进行截图需要进行一些特别的操作,使用html2canvas行不通。同时,针对tensorspa......
  • ASEMI代理ADAU1701JSTZ-RL原装ADI车规级ADAU1701JSTZ-RL
    编辑:llASEMI代理ADAU1701JSTZ-RL原装ADI车规级ADAU1701JSTZ-RL型号:ADAU1701JSTZ-RL品牌:ADI/亚德诺封装:LQFP-48批号:2023+安装类型:表面贴装型引脚数量:48类型:车规级芯片工作温度:−0°C~70°CADAU1701JSTZ-RL特征28-/56位,50MIPS数字音频处理器从串行EEPROM自启动用于模拟控制的带4输......
  • js开发规范
    ####################### 1.缩进[强制] 使用4个空格做为一个缩进层级,不允许使用2个空格或tab字符。[强制] switch中缩进2个空格[强制] 要求分号前面不可以有空格,后面可以有空格[强制] 要求语句块之前保留一个空格[强制] 关键字和类似关键字前后保留一个空格[强制] 要......