一道有趣的异步题

从公众号里看到一道异步题目，花了点时间看了下，挺有意思的。

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 的顺序打印

按照上面的测试用例，实现 createFlow：

flow 是指一系列 effects 组成的逻辑片段。

flow 支持嵌套。

effects 的执行只需要支持串行。

原文解法：

    function createFlow(effects = []) {
        let sources = effects.slice().flat();
        function run(callback) {
            while (sources.length) {
                const task = sources.shift();
                const next = () => createFlow(sources).run(callback);
                if (typeof task === "function") {
                    const res = task();
                    if (res?.then) {
                        res.then(next);
                        return;
                    }
                } else if (task?.isFlow) {
                    task.run(next);
                    return;
                }
            }
            callback?.();
        }
        return {
            run,
            isFlow: true,
        };
      }
      
如果对嵌套思路有点不明白，可以换种思路

function createFlow(effects = []) {
let sources = effects.slice().flat();
function run(callback) {
    if (!sources.length) {
        callback?.();
        return;
    }
    while (sources.length > 0) {
        const task = sources.shift();
        if (task?.isFlow) {
            let newSources = task.sources.concat(sources);
            createFlow(newSources).run(callback);
            break;
        } else if (typeof task === "function") {
            const res = task();
            if (res?.then) {
                res.then(() => {
                    createFlow(sources).run(callback);
                });
                break;
            }
        }
      }
    }
    return {
      run,
      sources,
      isFlow: true,
    };
}

测试用例

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const subFlow = createFlow([() => delay(2000).then(() => console.log("c"))]);
createFlow([
    () => console.log("a"),
    () => console.log("b"),
    subFlow,
    [
      () => delay(1000).then(() => console.log("d")),
      () => delay(1000).then(() => console.log("e")),
      () => delay(2000).then(() => console.log("f")),
    ],
]).run(() => {
    console.log("done");
});