如何让JavaScript事件等待另一个事件触发？双按钮交互场景

云上老周

2026-7-8

双按钮交互：点击第一个按钮后等待第二个按钮触发后续逻辑的可靠实现

需求与现有实现

需求：点击第一个按钮（button1）后，程序需等待第二个按钮（button2）被点击，再执行后续逻辑（示例中为打印Hello!），预期逻辑框架如下：

$("#button1").on("click", function() {
    // 等待button2被点击
    console.log("Hello!");
});

目前采用标记位加轮询的实现方式，但存在轮询消耗、状态管理易出错的问题：

let flag_triggered = false;

$("#button1").on("click", function() {
    button_one_click();
});

function button_one_click(){
    // 等待button2被点击
    if(flag_triggered == false){
        window.setTimeout(button_one_click, 100);
    }else{
        console.log("Hello!");
        flag_triggered = false;
    }
}

$("#button2").on("click", function() {
    flag_triggered = true;
});

更优解决方案

方案1：Promise + 一次性事件监听

利用Promise封装等待button2点击的异步逻辑，结合jQuery的one()方法绑定一次性事件监听，确保每次button1点击只会触发一次button2的监听，逻辑清晰且无轮询开销：

$("#button1").on("click", async function() {
    // 等待button2被点击
    await new Promise(resolve => {
        $("#button2").one("click", resolve);
    });
    console.log("Hello!");
});

方案2：状态标记 + 事件回调（非轮询）

通过状态变量记录是否处于等待button2点击的状态，直接在button2的点击回调中判断并执行后续逻辑，轻量高效：

let waitingForButton2 = false;

$("#button1").on("click", function() {
    waitingForButton2 = true;
    console.log("已点击button1，请点击button2");
});

$("#button2").on("click", function() {
    if (waitingForButton2) {
        console.log("Hello!");
        waitingForButton2 = false;
    }
});