JavaScript 多个函数的顺序执行

Question

我(从昨天起第一次使用 JavaScript)设法让 JavaScript 按顺序执行顺序运行函数(参见下面的代码)(归功于 @CertainPerformance)。我需要在多个 SlowFunction 中使用 fastFunction。当前的解决方案对我来说似乎并不 DRY(不要重复)，同时它不能保证 SlowFunction1 和 SlowFunction2 的执行顺序。 JavaScript 中这个问题的 DRY 解决方案是什么？我可以通过某些配置强制 JavaScript 始终以顺序模式运行吗？对我来说，使用嵌套回调似乎不是最明智的解决方案。

function fastFunction(message) {
  console.log(message);
}

function slowFunction1(callback, message) {
  setTimeout(() => {
    console.log('slowFunction1!');
    callback(message);
  }, 10000);
}

function slowFunction2(callback, message) {
  setTimeout(() => {
    console.log('slowFunction2!');
    callback(message);
  }, 1000);
}

slowFunction1(fastFunction, 'fast_Function');
slowFunction2(fastFunction, 'fast_Function');

Answer 1

使用 async/await，您可以按如下方式对异步任务进行排序:

// Very handy utility function to get a promise that resolves after a given delay
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

function fastFunction(message) {
  console.log(message);
}

async function slowFunction1(callback, message) {
  console.log('slowFunction1!');
  await delay(2000); // two seconds
  callback(message);
}

async function slowFunction2(callback, message) {
  console.log('slowFunction2!');
  await delay(1000); // one second
  callback(message);
}

(async function() {
    // Put all your logic here, and await promises...
    await slowFunction1(fastFunction, 'fast_Function');
    await slowFunction2(fastFunction, 'fast_Function');
})(); // execute immediately

现在，您将在另一个完成后发生延迟，因此(大约)总执行时间为 2+1=3 秒。

这模仿了您所拥有的大部分模式，但是一旦您使用了 Promise，您就不再需要回调模式，并且可以这样做:

// Very handy utility function to get a promise that resolves after a given delay
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

function fastFunction(message) {
  console.log(message);
}

(async function() {
  console.log('slow part 1');
  await delay(2000); // two seconds
  fastFunction('fast_function');
  console.log('slow part 2');
  await delay(1000); // one second
  fastFunction('fast_function');
})(); // execute immediately