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

发布于 2025-01-12 13:37:38 字数 946 浏览 1 评论 0原文

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

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

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

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 事件的函数code> 事件在调用之前完成？编辑两个函数都修改同一个全局变量，但我不能在函数调用过程中让另一个函数修改该变量。

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扛起拖把扫天下 2025-01-19 13:37:38

事件处理程序中是否有某种固有的方法来强制附加到更改事件的函数在调用之前等待附加到模糊事件的函数完成？

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

同样，您也可以获得一个 blur 事件，而无需关联的 change 事件。

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

如果这两个事件都与相同的最终用户操作相关联，那么它们可能会按顺序发生，间隔时间很短，因此即使是短的 50 毫秒计时器也可能足以查看第二个事件是否即将发生，并且短时间的计时器可能足以查看第二个事件是否即将发生。用户不太可能注意到延迟。

如果我们更好地理解您在处理这两个事件时要做什么，我们可以更好地建议处理这种情况的特定代码。

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