带有按键暂停的setTimeout函数

时间:2018-11-12 01:12:10

标签: javascript html timer

嗨,我有一个使用计时器在div中重新加载消息的功能。 iv尝试了所有可能使我回过头来拥有稳定计时器的方法,但是几乎每一次尝试都使计时器最大化运行多次,而不是每4秒稳定一次。我看不到我在做什么错。

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

任何人都可以帮助指导我建立可行的模型。

谢谢。

这是代码。

$(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)
   })


});

1 个答案:

答案 0 :(得分:1)

使用

创建变量(第二次)时
 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>