天天观速讯丨JavaScript 实现异步任务循环顺序执行

2023-03-16 16:12:06 来源：博客园

【资料图】

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");    }  });});

执行结果输出：

二、正确的实现

// 异步任务的参数数组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);  });

执行结果输出：

关键词：