📜  等到函数完成 javascript (1)

📅  最后修改于: 2023-12-03 15:27:25.040000             🧑  作者: Mango

等到函数完成 JavaScript

在编写 JavaScript 代码时,经常会遇到异步操作。例如 Ajax 请求、定时器、Promise 等。这些操作会导致代码执行的顺序出现问题,难以控制。在这种情况下,我们经常会使用等待函数来确保异步操作完成后再继续执行后续代码。

等待一个异步函数

在等待异步函数时,我们通常使用 Promise 或者 async/await 来实现。以下是一个等待一个异步函数的示例代码:

function waitFunction() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Function completed!');
    }, 1000);
  });
}

async function main() {
  console.log('Start waiting');
  await waitFunction();
  console.log('End waiting');
}

main();

这个示例代码使用了 Promise 和 async/await 来实现等待函数。在 main 函数中,先输出 "Start waiting",然后调用 waitFunction 函数,使用 await 等待 waitFunction 函数返回 Promise 对象,直到异步操作完成后再输出 "End waiting"。其中,waitFunction 函数返回一个 Promise 对象,在 1 秒钟后调用 resolve 函数并传入 "Function completed!",表示异步操作完成。

等待多个异步函数

有时候,我们需要等待多个异步函数,直到所有异步操作都完成后再继续执行后续代码。在这种情况下,我们可以使用 Promise.all() 来实现等待多个异步函数。

以下是一个等待多个异步函数的示例代码:

function waitFunction1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Function 1 completed!');
    }, 2000);
  });
}

function waitFunction2() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Function 2 completed!');
    }, 1000);
  });
}

async function main() {
  console.log('Start waiting');
  await Promise.all([waitFunction1(), waitFunction2()]);
  console.log('End waiting');
}

main();

在这个示例代码中,我们定义了两个异步函数 waitFunction1 和 waitFunction2,分别在 2 秒和 1 秒后完成异步操作。在 main 函数中,我们使用 Promise.all([waitFunction1(),waitFunction2()]) 来等待这两个异步函数完成。Promise.all() 返回一个 Promise 对象,当所有的异步操作完成时 resolve,返回一个数组,数组中包含每个异步操作的结果。在这个示例中,Promise.all() 返回的数组中包含两个字符串:"Function 1 completed!" 和 "Function 2 completed!"。在 waitFunction1() 和 waitFunction2() 均执行成功后,输出 "End waiting"。

以上就是使用等待函数等待 JavaScript 异步操作完成的示例。在实际编码中,我们需要根据具体的业务需求,选择适当的等待方式来保证代码的正确执行。