js同步（微任務、宏任務）異步任務

Imfan 發布于2019-08-23 13:08 / 522人閱讀

摘要：同步任務宏任務，微任務，異步任務我是定時器，延遲執行的是同步任務里面的宏任務我是里面的參數，里面的方法是宏任務里面的微任務查看輸出結果瀏覽器與上述代碼可以看出執行順序同步任務先執行宏任務，在執行微任務，遍歷異步隊列，執行異步任務是異步任務，

同步任務（宏任務，微任務），異步任務

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異步任務同步任務定時任務與觸發任務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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