How to prevent adding await/async to all functions?

Question

Starting with a very simple example asking a user to confirm a choice:

let a = function(){ return window.confirm( "Proceed" ); };
let b = function(){ console.log("b: " + a() ); };
let c = function(){ b(); console.log( "after b" ); };
c();
c();

window.confirm() is an asynchronous event but the function behaves in a synchronous way and blocks execution until it has resolved.

Changing this to use a custom UI which uses await to block execution until the user responds. But the await documentation states:

The await operator is used to wait for a Promise. It can only be used inside an async function.

So the function containing the await expression has to be made async and returns a promise, not the value as before, and now a() does not block execution:

let a = async function(){
  let conf = document.createElement( "DIV" );
  conf.className = 'confirm';
  let message = document.createElement( "DIV" );
  message.className = 'confirm-message';
  message.innerText = 'Proceed';
  conf.appendChild( message );
  let ok = document.createElement( "BUTTON" );
  ok.innerText = 'Ok';
  conf.appendChild( ok );
  let cancel = document.createElement( "BUTTON" );
  cancel.innerText = 'Cancel';
  conf.appendChild( cancel );
  document.body.appendChild( conf );
  let v = await new Promise(
    response => {
      ok    .addEventListener( "click", ()=>{ response(true ); }, false );
      cancel.addEventListener( "click", ()=>{ response(false); }, false );
    }
  );
  conf.remove();
  return v;
};
let b = function(){ console.log("b: " + a() ); };
let c = function(){ b(); console.log( "after b" ); };
c();
c();

.confirm { display: grid; width: min-content; grid-template-columns: 10em 10em; grid-gap: 0.5em; grid-auto-rows: 1.4em; text-align: center; border: 1px #777 solid; background-color: #AAA; padding: 0.5em; }
.confirm > .confirm-message { grid-column: 1 / 3; }

This just moves the problem up the call stack and successive functions need to use await/async to ensure they wait until the user input has resolved:

let a = async function(){
  let conf = document.createElement( "DIV" );
  conf.className = 'confirm';
  let message = document.createElement( "DIV" );
  message.className = 'confirm-message';
  message.innerText = 'Proceed';
  conf.appendChild( message );
  let ok = document.createElement( "BUTTON" );
  ok.innerText = 'Ok';
  conf.appendChild( ok );
  let cancel = document.createElement( "BUTTON" );
  cancel.innerText = 'Cancel';
  conf.appendChild( cancel );
  document.body.appendChild( conf );
  let v = await new Promise(
    response => {
      ok    .addEventListener( "click", ()=>{ response(true ); }, false );
      cancel.addEventListener( "click", ()=>{ response(false); }, false );
    }
  );
  conf.remove();
  return v;
};
let b = async function(){ let v = await a(); console.log("b: " + v ); };
let c = async function(){ let v = await b(); console.log( "after b" ); };
(async function(){
  let c1 = await c();
  let c2 = await c();
})();

.confirm { display: grid; width: min-content; grid-template-columns: 10em 10em; grid-gap: 0.5em; grid-auto-rows: 1.4em; text-align: center; border: 1px #777 solid; background-color: #AAA; padding: 0.5em; }
.confirm > .confirm-message { grid-column: 1 / 3; }

Is there a way to use the new await syntax to block execution without changing the signature of all the calling functions and also making them async (to mimic the example using the built-in window.confirm() function)?

Answer 1

When an async function reaches an await statement, the caller of the function will continue to execute, if it does not use await to also pause its execution. This lets you control on which level your program will stop and wait.

Since you want it to stop on the top level, there is no way to avoid adding await/async to all functions along the call stack.

Answer 2

If I understand correctly, you want to block execution in the top level/global context. Top level await is only available in modules. Unless you use modules, you cannot block execution in the global context (and even then, it's only blocked for that module).

The next best thing you can do is to create a sort of main async function in which you put all of the code that you would expect to block. Now if you put a(), b() and c() in this function, when using await all other code in this function will be blocked. The main function will return a Promise and run async, however, since all of your code is in this function, inside it, it‘s synchronous. Making the main function block the entire JavaScript thread is not possible. Do note that this requires re-writing your functions to use async/await.

This solution involves moving the problem as much as possible to the top of the call stack and that is the only solution if you want to block other code. Note that you also cannot block other visual events on the page, like focusing an input, clicking buttons, triggering CSS hover animations, etc. without using additional JS to cancel these events while your prompt is open or using some sort of overlay/backdrop.

Here are some examples (I have used ES features such as arrow functions, but if that specifically doesn't work for your project, feel free to change that):

(async () => {
    const a = () => {
        // … render HTML etc.
        return await Promise(resolve => { /* … add event listeners */}
    }
    const v = await a();
    console.log("value: ", v);
    console.log("end");
})();

(async () => {…})() is your main function, inside which you can simulate synchronous execution (if all of your code that you want to block is inside this function)

If you want to use b() and c(), similarly you can:

(async () => {
    const a = async () => {
        // … render HTML etc.
        return await Promise(resolve => { /* … add event listeners */}
    }
    const b = async () => {console.log("value: ", await a())};
    const c = async () => {await b(); console.log("end");
    await c();
    // any other after this line is blocked until resolution of `c()`
})();

Demo:

(async () => {
  const a = async () => {
    const conf = document.createElement('div');
    conf.className = 'confirm';
    
    const message = document.createElement('div');
    message.className = 'confirm-message';
    message.textContent = 'Proceed';
    conf.appendChild(message);
    
    const ok = document.createElement('button');
    ok.textContent = 'Ok';
    conf.appendChild(ok);
    
    const cancel = document.createElement('button');
    cancel.textContent = 'Cancel';
    conf.appendChild(cancel);
    document.body.appendChild(conf);
    
    const v = await new Promise(resolve => {
        ok.addEventListener('click', () => resolve(true), false);
        cancel.addEventListener('click', () => resolve(false), false);
    });
    conf.remove();
    return v;
  };
  const b = async () => console.log("b: " + await a());
  const c = async () => {
    await b();
    console.log( "after b" );
  };
  
  await c();
  // delay of 1 second
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("2nd go");
  await c();
})();

.confirm { display: grid; width: min-content; grid-template-columns: 10em 10em; grid-gap: 0.5em; grid-auto-rows: 1.4em; text-align: center; border: 1px #777 solid; background-color: #AAA; padding: 0.5em; }
.confirm > .confirm-message { grid-column: 1 / 3; }

Another option would of course be to simply use a module. Third-party libraries like Webpack achieve top level await by placing all of your code in an async function, similarly to my demo.

To summarise:

Blocking the main or browser tab thread is NOT possible

in browser JavaScript. That would be extremely bad and allow you to "freeze" the user's tab, not even allowing them to close it. Blocking is possible with top level await in modules. To simulate blocking, you can put all of your code in an async context; in this context, any await will block the entire context.

In Node.js, top level await is supported in newer versions and you can block the global context of your Node.js app. Adding a wrapper like (async () => {…})(); is therefore not needed if you‘re using a supported version of Node.js.

Answer 3

You should be using the then() function. Then returns the results of your async function after fulfilling the promise.

// First define your main async function. 
let a = async function(){
  let v = await new Promise(
    response => {
      ok    .addEventListener( "click", ()=>{ response(true ); }, false );
      cancel.addEventListener( "click", ()=>{ response(false); }, false );
    }
  );
 
  return v;
};

// Then get the results of your async function

let b = a.then((result) => { 
   console.log("b: " + result ); 
});