如何实现JavaScript事件的队列式顺序处理？

你的代码存在两个核心问题：

1. 异步事件监听器每次触发都会启动独立的异步任务，没有排队机制，导致多次点击时所有任务同时开始执行
2. if (!event.target.matches(".button-name")) 末尾多了分号，导致判断逻辑完全失效，不管点击的是不是目标按钮都会执行后续代码

要实现事件按顺序依次处理的需求，需要维护一个Promise队列，让每个任务都等待前一个任务完成后再执行。修正后的代码如下：

// 初始化一个已完成的Promise作为队列起点
let taskQueue = Promise.resolve();

document.addEventListener("click", function(event) {
    // 仅处理目标按钮的点击事件
    if (!event.target.matches(".button-name")) return;
    event.preventDefault();

    // 将当前任务追加到队列末尾，等待前序任务完成后执行
    taskQueue = taskQueue.then(async () => {
        console.log("one");
        await sleep(5000);
        console.log("two");
    });
});

function sleep(milliseconds) {
    return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

代码说明 #

• taskQueue 作为任务队列的载体，初始状态为已完成的Promise，确保第一个任务能直接执行
• 每次点击按钮时，通过then()将当前的异步处理逻辑追加到队列末尾，实现任务的顺序执行
• 修正了if语句的分号错误，确保只有点击.button-name按钮时才会触发处理流程

这样多次点击按钮后，会严格按照"one → 等待5秒 → two → 下一个one..."的顺序执行，不会出现批量打印的情况。

内容的提问来源于stack exchange，提问作者CursingOwl