为什么js直接调用多次click()事件仅触发一次接口调用

Question

btn.click();
btn.click();
btn.click();
这样只会触发一次。

但是
btn.click();
await sleep(0);//一个自己写的promise等待
btn.click();
await sleep(0);
btn.click();

却可以触发三次，是因为click事件在运行过程中不允许再次触发吗，前端未作防重

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

你遇到的问题与JavaScript的事件处理机制和异步编程有关。首先，我们来理解一下这两个场景的不同之处。

第一种情况：连续调用多次 click() 事件仅触发一次接口调用

当你连续调用 btn.click(); 时，浏览器会按照同步的方式执行这些调用。由于事件处理函数通常是异步的（例如，通过Ajax调用接口），连续调用 click() 事件并不会立即触发多次接口调用。浏览器会等待当前事件处理完成后，才会处理下一个事件。这意味着如果你的第一个 click() 事件处理中包含了异步操作（如Ajax请求），只有当这个异步操作完成后，才会处理第二个和第三个 click() 事件。因此，从表面上看，似乎只触发了一次接口调用。

第二种情况：使用 await sleep(0) 后多次调用 click() 可以触发多次接口调用

当你使用 await sleep(0) 时，这实际上创建了一个短暂的异步等待时间。sleep(0) 仍然会返回一个新的Promise，并将其延迟解决。当 await sleep(0) 执行后，会允许后续代码执行。因此，每次 click() 事件都有机会被触发和执行相应的接口调用。这是因为每个 click() 事件之间都有短暂的延迟，使得前一个事件有足够的时间完成其异步操作（如Ajax请求）。这样，你可以看到每次 click() 事件都触发了相应的接口调用。

结论

问题的关键在于JavaScript的事件处理机制和异步编程模型。在连续同步调用 click() 时，只有当前事件处理完成才会处理下一个事件。而在使用异步等待的情况下，每次 click() 之间都有短暂的延迟，允许前一个事件的异步操作完成后再触发下一个事件。这就是为什么前者只触发一次接口调用而后者可以触发多次的原因。前端未作防重（防止重复触发）的策略也是影响结果的一个因素。在实际应用中，你可能需要根据具体情况实现适当的防重策略来避免不必要的接口调用。