CODEWITHSUNDEEP
javascriptcountersetinterval
msafi
msafi

Reputation: 377

Manually set interval time for setInterval

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

Upvotes: 0

Views: 1378

Answers (3)

user5891081
user5891081

Reputation:

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>

Upvotes: 0

kevinkl3
kevinkl3

Reputation: 961

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/

Upvotes: 1

Wex
Wex

Reputation: 15695

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

Upvotes: 1

Related Questions