时间戳

首页 > 解决方案 > 带按键暂停的 setTimeout 函数重载

javascript - 带按键暂停的 setTimeout 函数重载

问题描述

嗨，我有一个功能是使用计时器重新加载 div 中的消息。我尝试了所有可能的方法，我可以让我的头脑有一个稳定的计时器，但几乎每次尝试都会让计时器最大化运行多次，而不是每 4 秒稳定 1 次。我看不出我做错了什么。

计时器一直在工作，直到我按下一个键，然后在计时器重新启动后，我在控制台输出中运行了多个计时器。

任何人都可以帮助指导我找到一个可行的模型。

谢谢你。

这是代码。

$(window.ready = function(){


var ticker = function (){ 

    var varLISTID = "<?php echo $listID; ?>";
    var varUSERACCOUNTNAME = "<?php echo $useraccountname; ?>";
    var varITEMACCOUNTNAME = "<?php echo $itemaccountname; ?>";
    var varSELECTEDUSER=document.getElementById('datacatchuser').getAttribute("data-variable-SELECTEDUSER");


    var mybutton= "messageboxreplybutton.php?listID=" + varLISTID + "&useraccountname=" + varUSERACCOUNTNAME + "&itemaccountname=" + varITEMACCOUNTNAME + "&selecteduser=" + varSELECTEDUSER;
    $('#buttonbox').load(mybutton);

    var mylink = "loadmessages.php?listID=" + varLISTID + "&useraccountname=" + varUSERACCOUNTNAME + "&itemaccountname=" + varITEMACCOUNTNAME + "&selecteduser=" + varSELECTEDUSER;
    $('#infobox1').load(mylink);

    var myotherlink = "contactselect.php?listID=" + varLISTID + "&useraccountname=" + varUSERACCOUNTNAME + "&itemaccountname=" + varITEMACCOUNTNAME + "&selecteduser=" + varSELECTEDUSER; 
    $('#containercontact').load(myotherlink);
            console.log('running');
};//10s



var myTimer = window.setTimeout(ticker, 4000);

   //stops running until ???
   $(document).keypress(function() {

           window.clearInterval(myTimer);

           setTimeout( function(){
              var myTimer = window.setTimeout(ticker, 4000);

            },4000)
   })


});

标签： javascripthtmltimer

解决方案

当您创建一个变量（第二次）时

 var myTimer = window.setTimeout(ticker, 4000);

在函数内部，您创建了该函数的局部新变量，稍后可以访问该变量，因此您无法清除它。这就是为什么您最终会使用多个正在运行的计时器。如果您只使用一个指向当前运行间隔的变量，则可以在开始另一个变量之前将其清除：

function ticker() {
  console.log("timer fired")
}
var myTimer = setInterval(ticker, 1000);

//stops running until ???
$(document).keypress(function() {
  console.log("clearing")
  clearInterval(myTimer);
  // don't use var, just access the existing variable from the parent scope.
  myTimer = setInterval(ticker, 1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

只运行一次，除非有按键，否则只需替换setInterval为setTimeout. 这将设置一个 4 秒的计时器。如果有按键，它将取消第一个超时并重置另一个。

   function ticker() {
      console.log("timer fired")
    }
    var myTimer = setTimeout(ticker, 4000);

    //stops running until ???
    $(document).keypress(function() {
      console.log("resetting timeout")
      clearTimeout(myTimer);
      // don't use var, just access the existing variable from the parent scope.
      myTimer = setTimeout(ticker, 4000);
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

推荐阅读