Question

我有两个函数，x()和`y（），通过单击按钮， buttonX 和 buttonY 来调用它们，以及实际操作叫超时。我想要实现的目标：

单击 buttonX 时，函数y()不再执行，并且函数x()被调用 - 超时;
单击 buttonY 时，函数x()不再执行，并且调用函数y() - 超时;

怎么做？

HTML

<button onclick = "x()">button1</button>  
<button onclick = "y()">button2</button>

JS

function x(){
  // dosomething;  
  // stop execution of y()   
  setTimeout(x,2000);  
}
                    }  
function y(){
  // dosomeother thing;  
  // stop execution of x()  
  setTimeout(y,2000);
}

Answer 1

我会通过在一些布尔值的超时内调节两个动作来接近它，即：

<强> HTML

<button id="firstFunction">Run first function</button>
<button id="secondFunction">Run second function</button>

<强> JS

var callFirstFunction = true;
var callSecondFunction = true;

document.getElementById("firstFunction").addEventListener("click", function(e){
  callFirstFunction = true;
  callSecondFunction = false;
  setTimeout(function(){
    if(callFirstFunction) {
      //your first function action
    }
  }, 10000);
}

document.getElementById("secondFunction").addEventListener("click", function(e){
  callSecondFunction = true;
  callFirstFunction = false;
  setTimeout(function(){
    if(callSecondFunction) {
      //your second function action
    }
  }, 10000);
}

Answer 2

以下是使用clearTimeout功能执行此操作的方法。它比在回调函数本身中使用if语句更清晰，因为回调函数完全被取消。

var timeoutOne;
var timeoutTwo;

function x(){
  clearTimeout(timeoutTwo);
  timeoutOne = setTimeout(function(){
    alert("Button One Pressed");        
  }, 1000);
}

function y(){
  clearTimeout(timeoutOne);
  timeoutTwo = setTimeout(function(){
    alert("Button Two Pressed");        
  }, 1000);
}

<button onClick="x()">Button One</button>  
<button onClick="y()">Button Two</button>

使用两个按钮启动和停止两个具有超时功能

2 个答案: