js同步（微任务、宏任务）异步任务

Imfan 发布于2019-08-23 13:08 / 430人阅读

摘要：同步任务宏任务，微任务，异步任务我是定时器，延迟执行的是同步任务里面的宏任务我是里面的参数，里面的方法是宏任务里面的微任务查看输出结果浏览器与上述代码可以看出执行顺序同步任务先执行宏任务，在执行微任务，遍历异步队列，执行异步任务是异步任务，

同步任务（宏任务，微任务），异步任务

console.log(1);

setTimeout(() => {
  console.log("我是定时器，延迟0S执行的");
}, 0);

new Promise((resolve, reject) => {
  console.log("new Promise是同步任务里面的宏任务");
  resolve("我是then里面的参数，promise里面的then方法是宏任务里面的微任务");
}).then(data => {
  console.log(data);
});

console.log(2);

查看输出结果 浏览器与node

上述代码可以看出执行顺序,同步任务（先执行宏任务，在执行微任务），遍历异步队列，执行异步任务

setTimeout setInterval 是异步任务，promise.then()是微任务，new Promise()是宏任务

嵌套执行案例分析

/**
 * 1. 程序先执行同步任务，在执行异步任务
 * 2.同步任务分为宏任务和微任务
 */

async function testSometing() {
  console.log("执行testSometing");
  return "testSometing";
}

async function testAsync() {
  console.log("执行testAsync");
  return Promise.resolve("hello async");
}

async function test() {
  console.log("test start...");
  new Promise(resolve => {
    console.log("async 里面的promise");
    resolve("async里面的promise里面的then");
  }).then(data => {
    console.log(data);
  });
  const v1 = await testSometing();
  console.log(v1);
  const v2 = await testAsync();
  console.log(v2);
  console.log(v1, v2);
}

test();

var promise = new Promise(resolve => {
  console.log("promise start..");
  resolve("promise");
}); //3
promise.then(val => console.log(val));
setTimeout(() => {
  console.log("setTime1");
}, 3000);
console.log("test end...");

/*

1. 程序从上到下执行,遇到test()函数执行,执行test函数里面的代码，同样分为同步异步的情况
  1）输出 “test start...”  
  2）Promise是一个宏任务 输出 “async 里面的promise” 后续代码会被推入微任务队列
  3）遇见 await await后面的会被转换为Promise Promise里面的代码是宏任务，then()里面的代码是微任务，所以执行后面的 testSometing 这个函数，需要分析 testSomething 这个函数 输出“执行testSometing” 遇到函数的返回值，对应 await 来说，这个return的值作为 then 里面的参数，会被 v1这个变量接收 await 会阻止后续代码的执行 test() 目前执行完毕
  4）遇见 promise 输出 ‘promise start..’ 后续代码推入到微任务
  5）后续遇见定时器，异步任务，推入异步队列
  6）输出 “test end” 全部宏任务执行完毕，检查微任务队列
  7）第一个微任务是执行 test()函数推入的 输出“async里面的promise里面的then”
  8）还记得 test() 里面的await 后面的 微任务执行 输出 “test something”
  9) 继续向下执行 执行 testAsync 输出 "执行testAsync" 
  10) 再次推入微任务
  11）执行 promise 那一个微任务 输出 promise
  12）10步的时候推入了一个微任务，继续执行 输出 “hello async”
  13）遇见 console 执行 “testSometing hello async”
  14）微任务执行完毕 执行异步任务，就是定时器 输出 “setTime1”
 */

GPU服务器服务器托管异步任务队列 asynctask异步任务同步任务定时任务与触发任务

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

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

js的setTimeout和Promise---同步异步和微任务宏任务

摘要：为了最终确认，进行最后一次验证，在第一个里面多加一层同步新加行新加行新加行新加行新加行新加行同步输出结果如下同步同步确认完毕，的确是一层一层的执行。而是微任务，是宏任务。久经前端开发沙场，会经历各式各样的需求，处理这些需求时候，会使用各种各样的api和功能，这里集中对setTimeout和Promise的异步功能进行讨论一下。单独使用的执行模式这里就使用Promise作为例子，...

stdying 2019-08-26 13:28 评论0 收藏0
JavaScript执行机制、事件循环

摘要：曾经的理解首先，是单线程语言，也就意味着同一个时间只能做一件事，那么为什么不是多线程呢这样还能提高效率啊假定同时有两个线程，一个线程在某个节点上编辑了内容，而另一个线程删除了这个节点，这时浏览器就很懵逼了，到底以执行哪个操作呢所以，设计者把 Event Loop曾经的理解首先，JS是单线程语言，也就意味着同一个时间只能做一件事，那么为什么JavaScript不是多线程呢？这样还能提...

rose 2019-08-22 13:59 评论0 收藏0
JavaScript同步、异步及事件循环

摘要：同步异步是单线程的，每次只能做一件事情。像以下这种情况，代码会按顺序执行，这个就叫同步。虽然是单线程，但是浏览器是多线程的，在遇到像事件等这种任务时，会转交给浏览器的其他工作线程上面提到的几个线程执行，执行完之后将回调函数放入到任务队列。同步、异步 JS是单线程的，每次只能做一件事情。像以下这种情况，代码会按顺序执行，这个就叫同步。 console.log(1); console.l...

zr_hebo 2019-08-23 14:17 评论0 收藏0
总结：JavaScript异步、事件循环与消息队列、微任务与宏任务

摘要：单线程异步非阻塞然后，这又牵扯到了事件循环消息队列，还有微任务宏任务这些。此步的位置不确定某个时刻后，定时器触发线程通知事件触发线程，事件触发线程将回调函数加入消息队列队尾，等待引擎线程执行。前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说：要是用一句话来形容 JavaScript，我可能会这样： Java...

qianfeng 2019-08-23 13:00 评论0 收藏0
今天，我明白了JS事件循环机制

摘要：而这些队列由的事件循环来搞定宏任务与微任务，在最新标准中，它们被分别称为与。我们梳理一下事件循环的执行机制循环首先从宏任务开始，遇到，生成执行上下文，开始进入执行栈，可执行代码入栈，依次执行代码，调用完成出栈。写在前面 js是一门单线程的编程语言，也就是说js在处理任务的时候，所有任务只能在一个线程上排队被执行，那如果某一个任务耗时比较长呢？总不能等到它执行结束再去执行下一个。所以在...

maochunguang 2019-08-26 10:24 评论0 收藏0