Question

This question already has answers here:

Callback function executing in the call stack even when it s not empty (2 answers)

Closed 2 mins ago.

我将这一法典归入浏览器:

document.body.addEventListener("click", () => {
    Promise.resolve().then(() => console.log(1));
    console.log(2);
}, false);

document.body.addEventListener("click", () => {
    Promise.resolve().then(() => console.log(3));
    console.log(4);
}, false);

这两场活动听众聆听了点击事件和打印数字。

接着,我写了执行这一声明的一条线:

document.body.click();

其结果是:

但随后,我点击了屏幕,因此触发了事件警报:

为什么在屏幕上点击和执行<代码> 。

Answer 1

你以点击或通过该守则加以操作的方式看待不同结果的原因,是合成业务是如何运作的,特别是许诺。

When you manually click the screen, the event listeners attached to the click event of the body element are triggered in the order they were added in your code. In this case, the first listener executes, logs 2, then 1, and then the second listener executes, logging 4 and 3 respectively.

Running document.body.click(): When you execute document.body.click(), the click event is triggered programmatically, but since you re also using promises (Promise.resolve().then(...)), the behavior slightly differs.

The event listeners attached to the click event are still executed in the order they were added. However, due to the promises, the callbacks inside them (logging 1, 2, 3, 4) might not execute immediately, as they are queued in the microtask queue. This means that while the click event is fired immediately when you call document.body.click(), the promises inside the event listeners are resolved asynchronously, and their callbacks (console.log statements) are executed later. So, the asynchronous nature of promises causes the difference in timing between manual and programmatic clicks, resulting in the different order of logged numbers.

我建议检查:microtasks and pledges。

友情链接