Start/stop Settimeout With A Button & Prevent Counting Faster With More Clicks

I am working with JavaScript and I use a setTimeout function in order to count up. Here is my code...

0

v

Solution 1:

To stop a timer you can use clearTimeout(), but it does require the id of the timer created with setTimeout(). The call to setTimeout() now saves the timer id in timeOut and then checks the contents of timeOut in start() to see whether a timer is currently running. If a timer is running then timeOut is used in clearTimeout(timeOut);.

var timeEl = 0;
var timeOut = null;
functionstart()
{
  if(timeOut !== null){
    clearTimeout(timeOut);
    timeOut = null;
  }else{
    time();
  }
}
functiontime()
{
  timeOut = setTimeout(function()
  {
    timeEl = timeEl + .1;
    timeEnd = timeEl.toFixed(1);
    document.getElementById("time").innerHTML = timeEnd;
    time();
  }, 100);
}

var el = document.getElementById("star");
el.addEventListener("click", start, false);

I hope this code clears the issue

JSFiddle

The same can be achieved using setInterval and clearInterval. Try this JSFiddle

Solution 2:

Every time the button is pressed, you get a second copy of your timer running, which is advancing your time faster.

var el = document.getElementById("star");
el.addEventListener("click", start, false);

I would recommend something like this:

var timerId = 0;
var timeEl = 0;
functionstart()
{
  time();
}
functiontime()
{
  timerId = setTimeout(function()
  {
    timeEl = timeEl + .1;
    timeEnd = timeEl.toFixed(1);
    document.getElementById("time").innerHTML = timeEnd;
    time();
  }, 100);
}

var el = document.getElementById("star");
el.addEventListener("click", function() {
  if (timerId !== 0) {
    clearTimeout(timerID);
    timerId = 0;
  } else {
    start();
  }
}, false);

Solution 3:

You can cancel a previously set timeout with clearTimeout - see https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout.

Solution 4:

try this JsFiddle

var timeEl = 0,timer;
functionstart()
{
  time();
}
functiontime()
{
document.getElementById("star").disabled=true;
  timer=setTimeout(function()
  {
    timeEl = timeEl + .1;
    timeEnd = timeEl.toFixed(1);
    document.getElementById("time").innerHTML = timeEnd;
    time();
  }, 100);
}

functionstop(){
document.getElementById("star").disabled=false;
clearTimeout(timer);
}

var el = document.getElementById("star");
el.addEventListener("click", start, false);
var elstop = document.getElementById("stop");
elstop.addEventListener("click", stop, false);

Solution 5:

I simply added a boolean that states if the counting is already running :

https://jsfiddle.net/0618eLoe/3/

var timeEl = 0;
var isStarted = false;
functionstartStop()
{
  if (!isStarted) {
    isStarted = true;
    time();
  } else {
    isStarted = false;
  }
}
functiontime()
{
  if (!isStarted) return;

  setTimeout(function()
  {
    timeEl = timeEl + .1;
    timeEnd = timeEl.toFixed(1);
    document.getElementById("time").innerHTML = timeEnd;
    time();
  }, 100);
}

var el = document.getElementById("star");
el.addEventListener("click", startStop, false);