快捷導(dǎo)航

JavaScript實現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行詳解

更新時間：2023年03月17日 09:08:50 作者：飛仔FeiZai

這篇文章主要為大家詳細介紹了JavaScript中實現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行的方法，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下

一、錯誤的實現(xiàn)

簡單的錯誤實現(xiàn)

// 異步任務(wù)的參數(shù)數(shù)組
const arr = [1, 2, 3, 4];
// 異步任務(wù)函數(shù)
function task(params, callback) {
  setTimeout(() => {
    if (!!callback) {
      callback(params);
    }
  }, 1000);
}
// 循環(huán)遍歷異步任務(wù)的參數(shù)數(shù)組，并執(zhí)行異步任務(wù)
console.time("Test code");
arr.forEach((item, index) => {
  task(item, (ret) => {
    console.log("ret", ret);
    console.timeEnd("Test code");

    if (index + 1 < arr.length) {
      console.time("Test code");
    }
  });
});

執(zhí)行結(jié)果輸出：

由上圖可知，所有異步任務(wù)的執(zhí)行是同時開始，并同時結(jié)束的，并未按順序先后執(zhí)行。

使用 Promise.all 的錯誤實現(xiàn)

Promise.all() 是一個用于并行執(zhí)行多個 Promise 的方法，當(dāng)所有的 Promise 都成功執(zhí)行后，它返回一個包含所有 Promise 結(jié)果的數(shù)組，如果其中任何一個 Promise 失敗或出錯，它將直接跳轉(zhuǎn)到 catch 塊中返回一個 rejected 狀態(tài)的 Promise。

// 異步任務(wù)的參數(shù)數(shù)組
const arr = [1, 2, 3, 4];
// 異步任務(wù)函數(shù)
function task(params, callback) {
  setTimeout(() => {
    if (!!callback) {
      callback(params);
    }
  }, 1000);
}

const tasks = [];

// 循環(huán)遍歷異步任務(wù)的參數(shù)數(shù)組，并執(zhí)行異步任務(wù)
console.time("Test code");
arr.forEach((item, index) => {
  tasks.push(
    new Promise((resolve) => {
      task(item, (ret) => {
        console.log("ret", ret);
        console.timeEnd("Test code");

        if (index + 1 < arr.length) {
          console.time("Test code");
        }
        resolve(ret);
      });
    })
  );
});

Promise.all(tasks)
  .then((values) => {
    console.log(values);
  })
  .catch((error) => {
    console.error(error);
  });

執(zhí)行結(jié)果輸出：

由上圖可知，循環(huán)中的所有異步任務(wù)的執(zhí)行是并行執(zhí)行的，并未按順序先后執(zhí)行。因為 Promise.all() 方法的執(zhí)行順序是并行執(zhí)行的，而不是按照 Promise 在數(shù)組中的順序執(zhí)行的。

二、正確的實現(xiàn)

// 異步任務(wù)的參數(shù)數(shù)組
const arr = [1, 2, 3, 4];
// 異步任務(wù)函數(shù)
function task(params, callback) {
  setTimeout(() => {
    if (!!callback) {
      callback(params);
    }
  }, 1000);
}

const tasks = [];

console.time("Test code");
arr.forEach((item, index) => {
  tasks.push(function () {
    return new Promise((resolve) => {
      task(item, (ret) => {
        console.log("ret", ret);
        console.timeEnd("Test code");
        if (index + 1 < arr.length) {
          console.time("Test code");
        }
        resolve(ret);
      });
    });
  });
});

// 定義一個遞歸函數(shù)來依次執(zhí)行任務(wù)
function runTasks(index) {
  if (index >= tasks.length) {
    // 如果所有任務(wù)都已經(jīng)執(zhí)行完畢，返回一個 resolved 的 Promise
    return Promise.resolve();
  }

  // 執(zhí)行當(dāng)前任務(wù)，然后遞歸執(zhí)行下一個任務(wù)
  return tasks[index]().then(function () {
    return runTasks(index + 1);
  });
}

// 調(diào)用遞歸函數(shù)來執(zhí)行任務(wù)
runTasks(0)
  .then(function () {
    console.log("All tasks are done!");
  })
  .catch(function (error) {
    console.error(error);
  });

執(zhí)行結(jié)果輸出：

到此這篇關(guān)于JavaScript實現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行詳解的文章就介紹到這了,更多相關(guān)JavaScript異步任務(wù)循環(huán)順序執(zhí)行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: