zoukankan      html  css  js  c++  java
  • "写出下列代码的执行结果"一直不会做?【JS Event Loop】

    浏览器的Event Loop

    引用1:https://segmentfault.com/a/1190000016278115

    引用2:https://blog.csdn.net/MFWSCQ/article/details/108448073

    event loop是一个执行模型,浏览器和NodeJS基于不同的技术实现了各自的Event Loop。

    执行一个JavaScript代码的具体流程:

     1 执行全局Script同步代码,这些同步代码有一些是同步语句,有一些是异步语句(比如setTimeout等);
     2 全局Script代码执行完毕后,调用栈Stack会清空;
     3 从微队列microtask queue中取出位于队首的回调任务,放入调用栈Stack中执行,执行完后microtask queue长度减1;
     4 继续取出位于队首的任务,放入调用栈Stack中执行,以此类推,直到直到把microtask queue中的所有任务都执行完毕。注意,如果在执行microtask的过程中,又产生了microtask,那么会加入到队列的末尾,也会在这个周期被调用执行;
     5 microtask queue中的所有任务都执行完毕,此时microtask queue为空队列,调用栈Stack也为空;
     6 取出宏队列macrotask queue中位于队首的任务,放入Stack中执行;
     7 执行完毕后,调用栈Stack为空;
     8 重复第3到第7个步骤;
     9 重复第3到第7个步骤;
    10 ......

    注意:Promise的构造方法是同步方法,then方法是异步方法。

    注意:把异步函数里面的内容当作一个整体callback放入队列里

    Promise

    https://zhuanlan.zhihu.com/p/81431697

    //生成一个Promise实例
    const promise = new Promise((resolve,reject)=>{
    if(success)
    resolve value;
    else
    reject(error);
    } );

    promise.then((value)=>{
    console.log(value);
    });

     

     

    练习题:

    new Promise((resolve) => {
      console.log('1');   
      resolve();
      console.log('2');
    }).then(() => {
      console.log('3');
    });
         
    setTimeout(() => { console.log('4'); });
    console.log('5');

    写出下列代码的执行结果:

    答案:

    1 2 5 3 4

    new Promise((resolve) => {
      console.log('1');  //同步   
      resolve();         //MicroTask
      console.log('2');  //同步
    }).then(() => {
      console.log('3');  //callback1
    });
         
    setTimeout(() => { console.log('4'); //callback2 });
    console.log('5'); //同步


    同步方法:【console.log('1');console.log('2')console.log('5');】
    MicroTask:【callback1】
    MacroTask:【callback2】

    所以就是12534
  • 相关阅读:
    类的继承
    面向对象的编程
    Python的模块
    ES6_12_Set和Map数据结构以及for of循环
    ES6_11_字符串、数值、数组、对象扩展
    ES6_09_Generator函数
    ES6_08_Iterator遍历器
    ES6_07_Symbol属性
    ES6_05_三点运算符和形参默认值
    Sqlstate解释
  • 原文地址:https://www.cnblogs.com/hikki-station/p/13792288.html
Copyright © 2011-2022 走看看