Javascript 如何等待执行异步函数的jQuery事件处理程序

我最近不得不在代码中添加一些异步函数，这导致了jest测试中的问题

我有许多jQuery事件处理程序如下所示：

// production code
jQuery(document).on('change', 'selector', (function () {
    // ...
    function(); // loads a hard-coded bit of JSON or loads from localStorage
    // ...
}));

// production code
$(document).on('change', 'selector', (async function () {
    // ...
    await functionButNowItsAsync(); // uses fetch() to load the JSON or loads from localStorage
    // ...
}));

现在看起来是这样的：

// production code
jQuery(document).on('change', 'selector', (function () {
    // ...
    function(); // loads a hard-coded bit of JSON or loads from localStorage
    // ...
}));

// production code
$(document).on('change', 'selector', (async function () {
    // ...
    await functionButNowItsAsync(); // uses fetch() to load the JSON or loads from localStorage
    // ...
}));

我的研究使我达到了，和

• 我不相信第一种方法是合适的，因为我不想监视命名函数，它们是匿名函数处理程序
• 第二个链接中的选项对于代码直接返回承诺的情况很有用
• 第三种方法只有在特定选择器的事件处理程序只调用单个处理程序时才有用。对于我的代码库，情况并非如此，前面的“选择器”和“选择器2”就证明了这一点。改变这一点将需要一个非无关紧要的工作量，所以我不愿意在不首先探索所有其他选择的情况下这样做

我的第一个问题是，我是否正确理解了异步概念，或者我是否遗漏了一些使我的任务更简单的基本内容？

---

其次，是否有一种方法可以“等待”异步事件处理程序？

我将使用MSW提供对获取的响应（例如：），然后等待DOM更新（例如，使用DOM测试库）。这样，您就不需要监视任何东西或直接触发jQuery事件，这将使您的测试与实现相耦合，而不是与_行为相耦合。@jornsharpe我一直在修改您关于使用DOM测试库中waitFor（）函数的建议。我不相信我可以消除jQuery触发器调用，因为expects正在测试事件处理程序的整体行为，而不仅仅是

函数，而是nowitsync

调用。我也不能直接调用该函数，因为它没有暴露在它所在的类之外。将预期包装在waitFor（）中让我进一步想到您仍然需要触发事件发生，但您可以使用getByRole（请参阅）和在更高级别上表达它。