I have two form elements on my HTML page: an input and a select.

Bound to the input is a blur event handler; bound to the select is a change event handler.

When you edit the input element and then click an option in the select element, both events are triggered. As it stands, the blur event is called before the change, which is what I want. I don't know if that's a happy coincidence, or if that's the way the spec is written. This is how it's programmed in my code:

select.addEventListener("change", selFxn);
input.addEventListener("blur", blurFxn);
var a, b;

async blurFxn(e) {
    a = await fxn1(e);
    b = await fxn2(a)
    input.value = b;
}
async selFxn(e) {
    b = await fxn3(a);
    input.value = b
}

However, is there some way inherent in the event handlers to force the function attached to the change event to wait for the function attached to the blur event to finish before it is called? EDIT Both functions modify the same global variable, but I can't have that variable modified by another function in the middle of a function call.

My current solution is to create a global promise that is created by blur and used by change to wait for the blur function to finish. But I'd rather not have to add this (minor) complexity if I don't have to.

CodePudding user response：

is there some way inherent in the event handlers to force the function attached to the change event to wait for the function attached to the blur event to finish before it is called?

No. There is no way for you to control the order these two events fire. They fire in the order the system decides to fire them. And, there are certainly circumstances where a change event fires with no associated blur event as the blur event occurs when the item loses focus and change events are possible without losing focus (and thus no blur event).

Similarly, you can get a blur event without an associated change event too.

If you want your processing of one to precede the other, then you'd have to implement some sort of system where you wait some short period of time (with a timer) to see if the two events are paired (if a 2nd associated event is immediately coming) and, if so, then process them in the order you want and if only one event arrived within that timer, then process the one event that you got.

If the two events are both associated with the same end-user action, then they will likely come sequentially with very little time between them so even a short 50ms timer would probably suffice to see if the 2nd event is coming or not and that short a delay would be unlikely to be noticed by the user.

If we understood better what you're trying to do in processing the two events, we could better advise on specific code to handle this situation.

It's also worth noting that if your event handlers are actually doing asynchronous things (which it seems like they probably are since you made them async), then there is also no way to make the 2nd event handler "wait" until the async function of the first event handler is completely done. Once you return from the previous event handler, even if some asynchronous operation is not yet complete, then the 2nd event handler can fire.