JavaScript 實現非同步任務迴圈順序執行

需求場景：數組的元素作為非同步任務的參數，迴圈遍歷該數組，並執行非同步任務。

一、錯誤的實現

簡單的錯誤實現

// 非同步任務的參數數組
const arr = [1, 2, 3, 4];
// 非同步任務函數
function task(params, callback) {
  setTimeout(() => {
    if (!!callback) {
      callback(params);
    }
  }, 1000);
}
// 迴圈遍歷非同步任務的參數數組，並執行非同步任務
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");
    }
  });
});

執行結果輸出：

由上圖可知，所有非同步任務的執行是同時開始，並同時結束的，並未按順序先後執行。

使用 Promise.all 的錯誤實現

Promise.all() 是一個用於並行執行多個 Promise 的方法，當所有的 Promise 都成功執行後，它返回一個包含所有 Promise 結果的數組，如果其中任何一個 Promise 失敗或出錯，它將直接跳轉到 catch 塊中返回一個 rejected 狀態的 Promise。

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

const tasks = [];

// 迴圈遍歷非同步任務的參數數組，並執行非同步任務
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);
  });

執行結果輸出：

由上圖可知，迴圈中的所有非同步任務的執行是並行執行的，並未按順序先後執行。因為 Promise.all() 方法的執行順序是並行執行的，而不是按照 Promise 在數組中的順序執行的。

二、正確的實現

// 非同步任務的參數數組
const arr = [1, 2, 3, 4];
// 非同步任務函數
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);
      });
    });
  });
});

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

  // 執行當前任務，然後遞歸執行下一個任務
  return tasks[index]().then(function () {
    return runTasks(index + 1);
  });
}

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

執行結果輸出：

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17222521.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！