手动设置设置间隔时间

Manually set interval time for setInterval

本文关键字：设置 时间      更新时间：2023-09-26

我正在尝试创建应用程序，用户可以在其中选择他们希望计数器增加的频率。例如，他们在输入框中键入他们希望它每 1 秒递增 5 次，并且 setInterval 将设置为 5 秒，依此类推。这是我到目前为止所拥有的：

<input type="text" id="timer"></input>
<input type="button" onlick="setTime()" value="test" />
<h1>0</h1>
<button class="play">Play</button>
<button class="pause">Pause</button>
<script type="text/javascript">
    function setTime() {
      var output = $('h1');
      var isPaused = true;
      var count = 0;
      timer = document.getElementById("timer").value;
      setInterval(function() {
        if(!isPaused) {
          time++;
          output.text(time);
        }
      }, timer*1000);
    }
    //with jquery
    $('.pause').on('click', function(e) {
      e.preventDefault();
      isPaused = true;
    });
    $('.play').on('click', function(e) {
      e.preventDefault();
      isPaused = false;
    });
</script>

我可以得到任何想法或帮助吗？我提前感谢它

稍微

重构一下你的代码，你可以这样做：

  Every <input type="text" id="timer"></input>Seconds<br>
  <button class="start">Start</button>
<h1>0</h1>
<button class="play">Play</button>
<button class="pause">Pause</button>

和JS：

var interval = null;
var time = 0;
var output = $('h1');
function setTimer() {
  var seconds = +($("#timer").val());//Get the user input (and convert to number)
  interval = setInterval(function() {
        time++;
        output.text( time );
   }, seconds*1000);
}
//with jquery
$('.pause').on('click', function(e) {
  e.preventDefault();
  if(interval){
    clearInterval(interval);//Clear the created interval
  }
});
$('.play').on('click', function(e) {
  e.preventDefault();
  setTimer();
});
$('.start').click(function(){
  time = 0;
  setTimer();
});

请参阅此处的工作示例：https://output.jsbin.com/cukehijuwo/

每次用户调用 setTime 时，您都会创建另一个间隔。这些将在应用程序的整个生命周期中继续创建。您应该在创建新超时之前删除超时：

var timeoutID = null;
function setTime() {
  ...
  clearTimeout(timeoutID);
  timeoutID = setTimeout(function() {
    ...
  }, timer * 1000);
}

供参考：https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

完整的简单测试程序，希望对您有所帮助

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    function display() {
      $("h1").html(parseInt($("#inc").val()) + parseInt($("h1").html())) ;
      t = setTimeout("display()",parseInt($("#int").val())*1000)
    }
    function pauseT(){
        clearTimeout(t);
    }
    function continueT(){
        t = setTimeout("display()",parseInt($("#int").val())*1000)
    }
</script>
Increment Value<input type="text" id="inc"></input>
Interval in Second<input type="text" id="int"></input>
<input type="button" onclick="display()" value="Start" />
<h1>0</h1>
<button onclick="continueT()">Continue</button>
<button onclick="pauseT()">Pause</button>
相关文章：