为何AbortController的abort事件未遵循JavaScript事件循环的“run to completion”原则？

你提到MDN说JavaScript事件循环里的消息是“run to completion”（即一个任务执行完毕才会轮到下一个），但你用AbortController写的这段代码输出却和预期不符，咱们来一步步拆解问题出在哪。

先看你的代码：

abortController1 = new AbortController()
abortController2 = new AbortController()

abortController1.signal.addEventListener("abort", () =>
{
    console.log("abort 1 start")
    abortController2.abort()
    console.log("abort 1 end")
})

abortController2.signal.addEventListener("abort", () =>
{
    console.log("abort 2")
})

abortController1.abort()

实际输出：

abort 1 start
abort 2
abort 1 end

你预期的输出：

abort 1 start
abort 1 end
abort 2

其实问题的核心是——AbortController的abort()方法是同步触发事件回调的，这和你理解的“事件循环任务队列调度”不是一回事。

咱们先明确“run to completion”的适用场景：它针对的是事件循环队列里的任务（比如点击事件回调、setTimeout回调这类宏任务，或者Promise.then这类微任务），这些任务会被放进队列，等当前正在执行的任务完全结束后，再从队列里取下一个执行。

但AbortController的abort()是个例外：当你调用这个方法时，浏览器会立即同步执行对应signal上绑定的所有abort事件回调，而不是把回调放进任务队列等后续处理。

回到你的代码流程：

1. 调用abortController1.abort()，同步触发第一个abort回调，打印“abort 1 start”
2. 在这个回调里调用abortController2.abort()，此时浏览器会立刻执行abort2的回调，打印“abort 2”
3. abort2的回调执行完毕后，回到abort1的回调里，继续执行剩下的代码，打印“abort 1 end”

这就是为什么输出顺序和你预期不一样——abort事件的回调是同步嵌套执行的，不属于事件循环队列里的“消息”，自然不遵循“run to completion”的队列调度规则。

这种同步触发的设计其实是有意为之的：AbortController的核心作用是让异步操作能被立即中止，同步触发回调可以确保中止信号的状态变化能被立刻响应，避免出现中间状态不一致的问题。

备注：内容来源于stack exchange，提问作者olfek