JSFiddle - React, Tailwind, and code Playground

by dievardump

JavaScript

const queue = {
  items: [],
  processing: false,
  async next() {
    if (this.processing || !this.items.length) {
      return;
    }

    this.processing = true;
    let item = this.items.shift();
    await item();
    await sleep(200);
    this.processing = false;
    this.next();
  },
  add(fn) {
    const promise = new Promise((resolve, reject) => {
      this.items.push(() => {
        fn()
          .then((...result) => {
            resolve(...result);
          })
          .catch((e) => reject(e));
      });

      this.next();
    });

    return promise;
  },
};


function promiseQueueAdd(something) {
  return queue.add(something);
}

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

let counter = 0;
async function doAndSleep() {
  return counter++;
}


(async () => {
	console.log(await promiseQueueAdd(() => doAndSleep()));
	console.log(await promiseQueueAdd(() => doAndSleep()));
	console.log(await promiseQueueAdd(() => doAndSleep()));
	console.log(await promiseQueueAdd(() => doAndSleep()));
	console.log(await promiseQueueAdd(() => doAndSleep()));
	console.log(await promiseQueueAdd(() => doAndSleep()));
	console.log(await promiseQueueAdd(() => doAndSleep()));
})()