Stop event propagating until async execution finishes

Question

I am trying to set up multiple listeners for one event so that the next one is being called only if the previous one had finished its job. Furthermore, every listener should be able to become "last listener".

I've already found a way to stop further propagation (through event.stopImmediatePropagation();) if some conditions are met.

Yet I can't find a solution to the first part of the problem.

I have the following code:

document.getElementById('test-btn').addEventListener('click', function(event) {
    console.log(123);
});

document.getElementById('test-btn').addEventListener('click', async function (event) {
    await new Promise(r => setTimeout(r, 2000));
    console.log(456);
});

document.getElementById('test-btn').addEventListener('click', function(event) {
    console.log(789);
});

Same situation with:

document.getElementById('test-btn').addEventListener('click', function (event) {
    setTimeout(function () {
        console.log(456);
    });
});

After click almost immediately outputs:

> 123
> 789
*waits for 2 seconds*
> 456

I'd like it to behave like:

> 123
*waits for 2 seconds*
> 456
> 789

It's important for me to keep this order because I am only responsible for the last listener.

mycode
template specific code
mycode

I would like to avoid the situation that some things in template code would require the use of asynchronous call and the order of actions changes.

Maybe there's a better way to achieve that?