手动设置setInterval的间隔时间

Question

I'm trying to create application where the user can select how often they want the counter to increment by. For example, they type into the input box that they want it to increment by 1 every 5 seconds, and the setInterval will be set to 5 seconds, etc. Here's what I have so far:

<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>

Can I get any ideas or help? I appreciate it in advance

Answer 1

Each time the user calls setTime , you are creating another interval. These will continue to be created throughout the lifecycle of your application. You should remove timeouts before creating new ones:

var timeoutID = null;

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

For reference: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Answer 2

Refactoring a little your code, you can do it this way:

  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>

And the 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();
});

See the working example here: https://output.jsbin.com/cukehijuwo/

Answer 3

Full simple tested program, hope this will help you

<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>