JavaScript 中使用 Promise.all() 方法来等待多个异步操作

在 JavaScript 中，你可以使用 Promise.all() 方法来等待多个异步操作完成后再执行某个函数。下面是一个示例的 JavaScript 函数，展示了如何在循环中执行多个异步操作，并在所有异步操作都完成后执行指定的回调函数：

function executeAsyncTasks(tasks, callback) {
  const promises = [];
  
  tasks.forEach(task => {
    const promise = new Promise((resolve, reject) => {
      // 执行异步任务
      task(resolve, reject);
    });
    promises.push(promise);
  });

  Promise.all(promises)
    .then(() => {
      // 所有异步操作都完成后执行回调函数
      callback();
    })
    .catch(error => {
      // 处理可能出现的错误
      console.error('Error:', error);
    });
}

这里的 executeAsyncTasks 函数接收两个参数：tasks 是一个包含异步任务的数组，每个任务都应该返回一个 Promise 对象；callback 则是所有异步任务完成后要执行的回调函数。

你可以将具体的异步任务以函数的形式添加到 tasks 数组中。在每个任务中，你可以执行你想要的异步操作，比如发送网络请求、读取文件等。当每个任务完成时，你需要调用 resolve() 函数来标记任务已完成，或者调用 reject() 函数来标记任务出错。

以下是一个示例，展示了如何使用 executeAsyncTasks 函数来执行多个异步任务：

// 异步任务1
function asyncTask1(resolve) {
  setTimeout(() => {
    console.log('Async Task 1 completed');
    resolve();
  }, 2000);
}

// 异步任务2
function asyncTask2(resolve) {
  setTimeout(() => {
    console.log('Async Task 2 completed');
    resolve();
  }, 3000);
}

// 异步任务3
function asyncTask3(resolve) {
  setTimeout(() => {
    console.log('Async Task 3 completed');
    resolve();
  }, 1500);
}

// 定义所有异步任务
const tasks = [asyncTask1, asyncTask2, asyncTask3];

// 在所有异步任务完成后执行的回调函数
function callback() {
  console.log('All tasks completed');
}

// 执行异步任务
executeAsyncTasks(tasks, callback);

在上述示例中，我们定义了三个异步任务 asyncTask1、asyncTask2 和 asyncTask3，每个任务会延迟一段时间后输出一条日志，并通过调用 resolve() 标记任务完成。然后，我们将这些任务添加到 tasks 数组中，并指定一个回调函数 callback 来在所有任务完成后进行调用。

当我们调用 executeAsyncTasks(tasks, callback) 时，它将会按顺序执行这些异步任务，并在所有任务都完成后执行回调函数 callback。

JavaScript 中使用 Promise.all() 方法来等待多个异步操作

用可重用的JavaScript函数管理CSS中的状态

使用JavaScript获取CSS自定义属性值

弥合CSS和JavaScript之间的鸿沟：JS中的CSS

WordPress用Javascript获取和修改Gutenberg post内容

为什么我要用JavaScript编写CSS

WordPress中的表情符号——注入css和javascript

通过JavaScript获取CSS旋转值

WordPress自定义程序中Javascript单击/更改事件的行为不一致

WordPressJavascript不工作

弥合CSS和JavaScript之间的鸿沟：CSS模块、PostCSS和CSS的未来