如何在沒有承諾和異步等待糖的情況下在 JS 中一一執行任務數組？

Question

深入javascript和node.js，一一搞清楚如何調用這種任務集合。

function a(callback) {
    setTimeout(() => {
        console.log('a');
        callback();
    }, 200);
}

function b(callback) {
    setTimeout(() => {
        console.log('b');
        callback();
    }, 100);
}

function c(callback) {
    setTimeout(() => {
        console.log('c');
        callback();
    }, 400);
}

function d(callback) {
    setTimeout(() => {
        console.log('d');
        callback();
    }, 50);
}

const collection = [a, b, c, d];

所以最后我想看到：

a
b
c
d

但是沒有異步，等待關鍵字和承諾。

Answer 1

這是一個可以解決問題的函數：

function run(funcs) {
    if (funcs.length === 0) {
        return;
    }
    const [f, ...remainingFuncs] = funcs;
    f(() => run(remainingFuncs));
}
run(collection);

如果你對 TypeScript 感興趣，這里是我寫的游樂場： Playground Link

Answer 2

好的，所以沒有 async/await 或 promises 仍然可以遞歸地遍歷集合。 我在你的下面添加了以下代碼：

const collection = [a, b, c, d];
var indexOfSelectedFunction = 0

function executeElementFromCollection(selectedFunction) {
  selectedFunction(() => {
    if(indexOfSelectedFunction < collection.length - 1) {
      indexOfSelectedFunction++
      executeElementFromCollection(collection[indexOfSelectedFunction])
    }
  })
}

function runCollection() {
  indexOfSelectedFunction = 0
  executeElementFromCollection(collection[indexOfSelectedFunction])
}

runCollection()

對於一些更高級的開發人員來說，該解決方案似乎不夠簡化，但我真的想讓代碼易於理解並為您提供指導。 希望它有幫助:)

Answer 3

function a() {
  setTimeout(() => {
    console.log("a");
    collection.length && collection.pop()();
  }, 200);
}

function b() {
  setTimeout(() => {
    console.log("b");
    collection.length && collection.pop()();
  }, 100);
}

function c() {
  setTimeout(() => {
    console.log("c");
    collection.length && collection.pop()();
  }, 400);
}

function d() {
  setTimeout(() => {
    console.log("d");

    collection.length && collection.pop()();
  }, 50);
}

const collection = [a, b, c, d].reverse();

collection.pop()();

不要評判我寫的奇怪的代碼。 這只是如何解決這個問題的一個例子。 您可以重構代碼並將其分成多個部分以使其可讀。

Answer 4

function iterateSeries(collection, iteratorCallback, finalCallback) {
    const task = collection.shift();
    if (collection.length == 0) {
        return (() => task(finalCallback))();
    }
    task(() => {
        iteratorCallback();
        iterateSeries(collection, iteratorCallback, finalCallback);
    });
}

iterateSeries(collection, () => {
    console.log('Done!');
}, () => {
    console.log('Finished!')
})