在 Javascript 中，有没有一种方法可以强制一个事件处理程序在它们都被调用时等待另一个事件处理程序完成？

Question

我的 HTML 页面上有两个表单元素：input 和 select。

绑定到 input 的是一个 blur 事件处理程序；绑定到 select 的是 change 事件处理程序。

当您编辑 input 元素然后单击 select 元素中的选项时，会触发这两个事件。就目前而言，blur 事件在 change 之前调用，这正是我想要的。我不知道这是一个巧合，还是规范就是这样写的。这就是它在我的代码中的编程方式：

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
}

但是，事件处理程序中是否有某种固有的方式来强制附加到 change 事件的函数等待附加到 blur 事件的函数完成后再被调用？编辑两个函数都修改同一个全局变量，但我不能在函数调用过程中让另一个函数修改该变量。

我目前的解决方案是创建一个由 blur 创建并由 change 用来等待 blur 函数完成的全局承诺。但如果不需要的话，我宁愿不必添加这种（次要的）复杂性。

Answer 1

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?

没有。您无法控制这两个事件的触发顺序。他们按照系统决定开火的顺序开火。而且，在某些情况下，change 事件会在没有关联的 blur 事件的情况下触发，因为 blur 事件会在项目失去焦点时发生，而 change 事件可能会在不失去焦点的情况下发生（因此没有 blur 事件）。

同样，您也可以在没有关联的 change 事件的情况下获得 blur 事件。

如果您希望一个事件先于另一个事件进行处理，那么您必须实施某种系统，在该系统中您等待一小段时间（使用计时器）以查看这两个事件是否配对（如果第二个关联事件立即到来），如果是这样，则按您想要的顺序处理它们，如果只有一个事件在该计时器内到达，则处理您得到的一个事件。

如果两个事件都与同一个 end-user 动作相关联，那么它们很可能会按顺序发生，它们之间的时间很短，因此即使是 50 毫秒的短计时器也可能足以判断第二个事件是否是来与不来，这么短的延迟不太可能被用户注意到。

如果我们能更好地理解您在处理这两个事件时试图做什么，我们可以更好地建议具体代码来处理这种情况。

还值得注意的是，如果您的事件处理程序实际上是在执行异步操作（自从您创建它们以来，它们似乎可能是这样 async），那么也没有办法创建第二个事件处理程序“等待”，直到第一个事件处理程序的 async 函数完全完成。一旦您从前一个事件处理程序 return，即使某些异步操作尚未完成，第二个事件处理程序也可以触发。

在 Javascript 中，有没有一种方法可以强制一个事件处理程序在它们都被调用时等待另一个事件处理程序完成？

In Javascript, is there a way to force one event handler to wait for another to finish when they're both called?

javascript

event-handling

promise