【JS】异步代码串行问题

问题一

核心思想：利用promise函数的resolve，进行sleep

题目描述

将n个任务每隔1s中执行一次

题解

const delay = time => new Promise(resolve => setTimeout(resolve, time));

const syncRun = async (eventQueue = []) => {
  for (const event of eventQueue) {
    await delay(1000).then(() => {
      event()
    });
  }
}

syncRun([() => console.log(1), () => console.log(2)]);

问题二【大厂面试题】

题目描述

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);

createFlow([
  () => log("a"),
  () => log("b"),
  subFlow,
  [() => delay(1000).then(() => log("d")), () => log("e")],
]).run(() => {
  console.log("done");
});

// 需要按照 a,b,延迟1秒,c,延迟1秒,d,e, done 的顺序打印

题解

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);
const { log } = console

createFlow([
  () => log("a"),
  () => log("b"),
  subFlow,
  [() => delay(1000).then(() => log("d")), () => log("e")],
]).run(() => {
  console.log("done");
});

function createFlow(effects = []) {
    return {
      async run(callback) {
        const flatEffects = effects.flat(Infinity);
        for (const effect of flatEffects) {
          if (typeof effect.run === 'function') {
            await effect.run();
          } else {
            await effect();
          }
        }
        if (typeof callback === 'function') {
          await callback();
        }
      }
    };
  }