How to assure that a call to an async function returns before another call to that same function is being executed?

Question

If I have the following code

const sleep = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

// myFunction is some kind of network operation, a database fetch etc.           
const myFunction = async (label) => {
  console.log("enter " + label);
  await sleep(500);
  console.log("leave " + label);
  return "return " + label;
}

// somewhere in the code, in some event handler
var varA = myFunction("a");
// ... do something with varA

// somewhere ELSE in the code, in some event handler
var varB = myFunction("b");
// ... do something with varB

The logging output will almost certainly be

enter a
enter b
leave a
leave b

So the second function call will be executed before the first finishes. I think I do understand why. await is only syntactic sugar and not actually blocking.

Question

How can I guarantee that the nth call to myFunction is being executed completely before the (n+1)th call starts? The logging output should be

enter a
leave a
enter b
leave b

• Is there a pattern?
• Is there any library I could use? (this node package seems to be unmaintained.)

Note: The function myFunction might be a library function I cannot change.

Why await myFunction does not work

The calls to myFunction could be anywhere else, e.g. in a click event handler, so we cannot just await myFunction. Which ever call enters first, should also leave the function body first (FIFO). As per this note, this is also NOT A DUPLICATE OF How can I use async/await at the top level?

If you use myFunction inside a click handler like this

<button onClick="() => { var varA = myFunction('button a'); console.log(varA) }">hit me</button>

you cannot simply await myFunction because if the user clicks several times myFunction will be called several times before the first call returns.

Answer 1

One idea like mentioned is create a promise queue.

Update, ok. slightly over complicated things, probably easier than a queue, is just create a promise chain.

So in summary, creating a global promise chain to serialise promises is just these 2 lines of code.

let pchain = Promise.resolve();
const chained = async p => pchain = pchain.then(() => p());

And then to use it.

chained(async () => somePromise());

The result of chained can also be awaited or use then / catch / finally.. You of course could create multiple ones, eg. lets say you had 2 databases and you wanted to be able to serialise to each one at the same time, but then serialise each DB.

Below is a runnable snippet using it action.

const sleep = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});
          
const myFunction = async (label) => {
  console.log("enter " + label);
  await sleep(500);
  console.log("leave " + label);
  return label + label;
}


//very simple promise chain
let pchain = Promise.resolve();
const chained = async p => pchain = pchain.then(() => p());


//TESTING...

//lets queue up 2 promises, and get result
chained(async () => myFunction("a"))
  .then(r => console.log(`result of a = ${r}`));
chained(async () => myFunction("b"))
  .then(r => console.log(`result of b = ${r}`));
  
//and of course will work with await.
(async () => {
  const r = await chained(async () => myFunction("c"));
  console.log(`result of c = ${r}`);
})();

//How about attaching to events.
makeBtn = caption => {
  const btn = document.createElement('button');
  btn.innerText = caption;
  document.body.appendChild(btn);
  btn.onclick = () => chained(async () => myFunction(caption));
}

makeBtn('A');
makeBtn('B');
makeBtn('C');
makeBtn('D');

Answer 2

If you have multiple things being triggered separately you want to build a queue type of system. There are a few ways to write that type of way, but basic idea is to register functions into an array and call them after the previous one finishes.

const sleep = async (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});
          
const myFunction = async (label) => {
  console.log("enter " + label);
  await sleep(500);
  console.log("leave " + label);
}

const basicQueue = () => {
  const queue = [];
  let isRunning = false;
  
  const run = async () => {
    await queue.shift()();
    if (queue.length) await run();
    else isRunning = false;
  };
  
  return fnc => {
    queue.push(fnc);
    if (isRunning) return;
    isRunning = true;
    run();
  };
}

const myQueue = basicQueue();

const registerClick = () => myQueue(async () => await myFunction(`2 - ${Date.now()}`))

document.querySelector("#btn").addEventListener('click', registerClick);

<button onclick="myQueue(async () => await myFunction(`1 - ${Date.now()}`))">Click 1</button>

<button id="btn">Click 2</button>

Answer 3

Looks like you need some kind of locking mechanism. Write a wrapper function that acquires the lock, invokes the target and then releases. Other invocations of the wrapper will have to wait until the lock is released.

Example:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

const myFunction = async (label) => {
    console.log("enter " + label);
    await sleep(500);
    console.log("leave " + label);
}

//

let _mutex = 0

async function acquire() {
    while (1) {
        if (_mutex === 0)
            return _mutex = 1
        // console.log('waiting for lock')
        await sleep(10)
    }
}

async function release() {
    return _mutex = 0
}

//

function synchronized(f) {
    return async function (...args) {
        await acquire()
        let res = await f(...args)
        await release()
        return res
    }
}

//

//let f = myFunction // <-- uncomment to see the difference
let f = synchronized(myFunction)

f('a')
f('b')
f('c')

Answer 4

Solution (Wrapper Function)

My take on a wrapper function awaits the currently running function before another call to that function is being processed.

When the first call is being processed and the wrapped function (read "Promise") is in pending state, any subsequent call will end up in the while loop and the until the first function returns. Then, the next wrapper function call on the stack leaves the while loop and calls the wrapped function. When the wrapped function is pending, the while loop runs one iteration for each message waiting on the stack.

const synchronized = (fn) => {
  let currently_executed_call = undefined; // this acts as a lock
  const _this = this; // useful for class methods.
  return async function () {
    while (currently_executed_call) {
      // wait until the currently running fn returns.
      await currently_executed_call;
    }
    currently_executed_call = fn.apply(_this, arguments);
    const return_value = await currently_executed_call;
    currently_executed_call = false; // free the lock
    return return_value;
  }
}

General Usage

You would use it like this:

const mySynchronizedFunction = synchronized(myFunction);

// then call the wrapper function as if it where the original:
var varA = await mySynchronizedFunction("a");

// ... and somewhere deep down in some event handler
var varB = await mySychronizedFunction("b");

However, I can't say whether this is actually strictly FIFO. Is it guaranteed that the (n+1)-th wrapper function call will actually call the wrapped function as the (n+1)-th in line? I think that requires a deep understanding of the event loop.

Class Methods

What I also don't like about this: Class methods can only be defined in the constructor (or is there another way?):

class MyClass {
  constructor (param_class_label) {
    this._class_label = param_class_label;
    this.synchronizedMethod = synchronized(
      // sychronized is arrow function, so "this" is the MyClass object.
      async (label) => {
        console.log("enter synchronized method " + this.class_label + "." + label);
        await sleep(500);
        console.log("leave synchronized method " + this.class_label + "." + label);
        return "return synchronized method " + this.class_label + "." + label;
      }
    )
  }
}

However, each method is being executed completely before the method is being called again (on the same object - which makes sense).

Library Functions

Also, this works with library functions as well:

import { libraryFunction } from 'library';
const synchronizedLibraryFunction = syncronized(libraryFunction);