zoukankan      html  css  js  c++  java
  • 常见的异步题

    这道题主要考察的是事件循环中函数执行顺序的问题,其中包括async ,awaitsetTimeoutPromise函数。下面来说一下本题中涉及到的知识点。

    //请写出输出内容
    async function async1() {
        console.log('async1 start');
        await async2();
        console.log('async1 end');
    }
    async function async2() {
        console.log('async2');
    }
    
    console.log('script start');
    
    setTimeout(function() {
        console.log('setTimeout');
    }, 0)
    
    async1();
    
    new Promise(function(resolve) {
        console.log('promise1');
        resolve();
    }).then(function() {
        console.log('promise2');
    });
    console.log('script end');
    
    
    /*
    script start
    async1 start
    async2
    promise1
    script end
    async1 end
    promise2
    setTimeout
    */

    首先我们需要明白以下几件事情:

    • JS分为同步任务和异步任务
    • 同步任务都在主线程上执行,形成一个执行栈
    • 主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。
    • 一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。

    任务队列(task queue),一个任务队列便是一系列有序任务(task)的集合;每个任务都有一个任务源(task source),源自同一个任务源的 task 必须放到同一个任务队列,从不同源来的则被添加到不同队列。setTimeout/Promise 等API便是任务源,而进入任务队列的是他们指定的具体执行任务。

    宏任务:(macro)task(又称之为宏任务)

    微任务:microtask(又称为微任务)

    运行:

    • 执行一个宏任务(栈中没有就从事件队列中获取)
    • 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
    • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
    • 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
    • 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

  • 相关阅读:
    vue子组件向父组件传值
    定义特有属性的对象
    电话号码的校验
    多个图片的显示与隐藏
    原生的ajax请求----(播放托管到爱奇艺上的视频)
    将视频托管到爱奇艺 (第一步)
    2018年春季个人阅读计划
    《软件需求与分析》阅读笔记
    Ngers天气——开发进程4
    软件需求与分析读书笔记3
  • 原文地址:https://www.cnblogs.com/anbozhu7/p/11251287.html
Copyright © 2011-2022 走看看