Question

我正在尝试实现这样的事情： https://www.w3schools.com/jsref/met_win_cleartimeout.asp

在我的网站上： http://shawnwow.com/chineseCharacterHelpr/

如果您在左侧输入上键入一些字母，请单击其中一个字符，然后等待5秒钟将显示一些图像（通过在flickr上搜索生成）。

我试图这样做，如果他们点击一个字符，然后在5秒超时完成之前点击另一个字符，它将取消之前的超时并开始新的超时。我正在做一个解决方法，我会在之前和之后吹掉标签中的内容，但有一会儿它会闪烁所有不同的图像。

这是JS开始的地方： https://github.com/olmansju/chineseCharacterHelpr/blob/master/JS/scripts.js#L52

我的链接与链接相似，因为清除超时和设置超时的命令位于同一个点击对象中。我看到很多其他地方有两个不同的按钮。

Answer 1

使用clearTimeout使用setTimeout清除超时集。

要清除特定的计划超时，您需要在变量中存储对该计划的引用。所以，你可以这样做：

var myTimeout = setTimeout(function(){
  alert("Timeout fired");
}, 5000 );

// to interrupt/cancel the timeout
clearTimeout( myTimeout );

＆＃13;

var myTimeout;

//sets timeout only once
$("#set").one("click", function(e){
  e.preventDefault();
  $(this).prop("disabled", true);
  myTimeout = setTimeout(function(){
    alert("timeout fired");
  }, 4000);//
});//#set click()

$("#clear").one("click", function(e){
  e.preventDefault();
  clearTimeout( myTimeout );  
  $(this).prop("disabled", true);
});//#clear click()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="set">Set Timeout</button>
<button id="clear">Clear Timeout</button>

＆＃13;

Answer 2

您必须在事件处理程序之外声明imageDelay变量。

当你在函数内部声明它时，它会在每次调用处理程序时创建一个新的局部变量，因此你的clearTimeout不会清除之前创建的超时。

Answer 3

＆＃13;

var myTimeout;

$(".buttons").on("click", function(e){
  e.preventDefault();
  var curText = $(this).text();
  clearTimeout( myTimeout );
  myTimeout = setTimeout(function(){
    $("#banner").text("Banner " + curText);
  }, 3000);
});//.buttons click()

＆＃13;

#banner
{
  background-color: orange;
  color: white;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
#buttons-container
{
  margin-top: 20px;
  text-align: center;
}
#buttons-container .buttons
{
  border: 2px solid magenta;
  color: magenta;
  display: inline-block;
  height: 22px;
  line-height: 16px;
  margin: 0 2px;
  width: 22px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="banner"></div>
<div id="buttons-container">
  <button class="buttons">1</button>  
  <button class="buttons">2</button>
  <button class="buttons">3</button>
  <button class="buttons">4</button>
  <button class="buttons">5</button>
</div>

＆＃13;

如何中断超时

3 个答案: