如何让一个JavaScript事件等待另一个事件触发?

rekjcdws  于 2023-10-14  发布在  Java
关注(0)|答案(3)|浏览(126)

我尝试为两个按钮链接两个JavaScript/jQuery事件。当按下一个按钮时,我希望它等待第二个按钮被单击,然后继续执行。大概是这样的:

$("#button1").on("click", function() {
    // wait for button 2 to be clicked
    console.log("Hello!");
});

现在,我发现的最好的方法是通过第二个按钮设置一个标志,并进行轮询,直到标志发生变化:

let flag_triggered = false;

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

function button_one_click(){
    // wait for button 2 to be clicked
    if(flag_triggered == false){
        window.setTimeout(button_one_click, 100);
    }else{
        console.log("Hello!");
        flag_triggered = false;
    }
}

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

我觉得应该有更可靠的方法来做到这一点。我该如何处理这种情况?

7rtdyuoh

7rtdyuoh1#

不需要轮询,你可以点击第二个按钮直接执行你需要执行的代码。至少有两种方法可以做到这一点:
1.让第一个按钮的单击向运行代码的第二个按钮添加一次性单击处理程序。在正常情况下,在事件处理程序中添加事件处理程序通常是问题的标志,但在这种特定情况下,它可能是正确的。
1.在两个按钮上都有处理程序,第一个按钮的单击设置一个标志,第二个按钮的单击查看该标志以确定是否应该运行某些代码。

  • (第三种选择是有一个变量,你分配一个函数,其中点击第二个按钮运行函数,如果变量有一个,如果变量是null或类似的,则忽略它,但这基本上是上面#1的变体。

在这两种情况下,您可以考虑向用户提供一些指示,表明第二个按钮不会做任何事情(例如,通过禁用它),如果事实上它不会做任何事情,直到/除非第一个按钮被单击。
由于您似乎不希望第二个按钮做任何事情,直到第一个按钮被点击,#1似乎很简单。

const button1 = $("input[value='Button 1']");
const button2 = $("input[value='Button 2']");

button1.on("click", () => {
    button2.prop("disabled", false);
    button2.one("click", () => { // <== Note 'one' rather than 'on'
        console.log("Button 2 clicked after Button 1");
        button2.prop("disabled", true);
    });
});
<input type="button" value="Button 1">
<input type="button" value="Button 2" disabled>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我应该注意到,jQuery不需要只是做这样简单的事情:

const button1 = document.querySelector("input[value='Button 1']");
const button2 = document.querySelector("input[value='Button 2']");

button1.addEventListener("click", () => {
    button2.disabled = false;
    button2.addEventListener(
        "click",
        () => {
            console.log("Button 2 clicked after Button 1");
            button2.disabled = true;
        },
        { once: true } // <== Removes the handler on first call
    );
});
<input type="button" value="Button 1">
<input type="button" value="Button 2" disabled>
yeotifhr

yeotifhr2#

您可以在单击第一个按钮时添加第二个按钮事件侦听器。我还要注意的是,你触发了一个点击事件,而不是监听一个。

let btn1 = $(...),
    btn2 = $(...);

function btn2handler(evt) {
  console.log(evt);
}

btn1.on('click', () => {
  let evts = $._data(btn2[0],'events');
  if(evts.click) {
    // If btn2 event handler set up, remove it
    btn2.off('click', btn2handler);
  }
  else {
    // otherwise add it
    btn2.on('click', btn2handler);
  }
})
prdp8dxp

prdp8dxp3#

试着这样做

$(document).ready(function() {
    var button1Clicked = false; // Flag to track if button 1 is clicked
    
    // Event handler for button 1
    $("#button1").on("click", function() {
        button1Clicked = true;
        console.log("Button 1 clicked");
        waitForButton2();
    });

    // Event handler for button 2
    $("#button2").on("click", function() {
        if (button1Clicked) {
            console.log("Button 2 clicked");
            // Continue with your code after button 2 is clicked
            console.log("Hello!");
        } else {
            console.log("Button 2 clicked without button 1");
        }
    });

    // Function to wait for button 2
    function waitForButton2() {
        if (!button1Clicked) {
            console.log("Waiting for button 2...");
        } else {
            console.log("Button 2 was clicked before button 1.");
        }
    }
});

在这段代码中,我们使用button1Clicked标记来跟踪第一个按钮是否被点击。当第一个按钮被点击时,它将button1Clicked设置为true并调用waitForButton2函数。当单击第二个按钮时,它检查button1Clicked是否为true,如果为true,则继续执行所需的代码。
这种方法确保了第二次按钮单击之后的代码仅在第一次按钮在第二次按钮之前单击时执行。如果单击第二个按钮而没有单击第一个按钮,则会提供一条消息指示此情况。

相关问题