javascript - 带有按键暂停的setTimeout函数

嗨，我有一个功能，可以使用计时器在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)
   })


});

最佳答案

当您使用第二个变量创建变量时

 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>