How to execute array of tasks one by one in JS without promises and async await sugar?

Question

Deeping down to javascript and node.js, figuring out how to call this kind of tasks collection one by one.

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];

So at the end I want to see:

a
b
c
d

But without async, await keywords and promises.

Answer 1

Here's a function that will do the trick:

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

If your interest extends to TypeScript, here's the playground I wrote this in: Playground Link

Answer 2

Ok, so without async/await nor promises it would still possible to iterate through the collections recursively. I added the following code below yours:

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()

The solution may seem not simplified enough for some more advanced developers, but I really wanted to the keep the code understandable and didactic for you. Hopefully it helps :)

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()();

Don't judge the weird code that I've written. It just the one example of how this thing could be solved. You can refactor and separate the code into the pieces to make it readable.

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!')
})