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

<button id="star">Start</button>
<p id="time">0</p>

var timeEl = 0;

function start() {
    time();
}

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

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

1. How do I get my setTimeout function to start on stop when I click on the button

2. How to prevent my counting from going faster the more times I click on the button.

I have included my JSFiddle below! /

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

<button id="star">Start</button>
<p id="time">0</p>

var timeEl = 0;

function start() {
    time();
}

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

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

1. How do I get my setTimeout function to start on stop when I click on the button

2. How to prevent my counting from going faster the more times I click on the button.

I have included my JSFiddle below! https://jsfiddle/pb4759jh68/0618eLoe/

• javascript
• recursion
• settimeout

Share Improve this question Follow edited Jan 22, 2018 at 13:59 GrumpyCrouton 8,61977 gold badges3737 silver badges8080 bronze badges asked Apr 20, 2016 at 4:14 stefan.kenyonstefan.kenyon 33911 gold badge55 silver badges1616 bronze badges 2

• You can simplifiy code by using setInterval – Sandeep Nayak Commented Apr 20, 2016 at 4:31
• you can use setInterval for recursion and clearInterval to stop the recursion loop. – Akshay Khale Commented Apr 20, 2016 at 5:06

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

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;
function start()
{
  if(timeOut !== null){
    clearTimeout(timeOut);
    timeOut = null;
  }else{
    time();
  }
}
function time()
{
  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

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 remend something like this:

var timerId = 0;
var timeEl = 0;
function start()
{
  time();
}
function time()
{
  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);

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

try this JsFiddle

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

function stop(){
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);

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

https://jsfiddle/0618eLoe/3/

var timeEl = 0;
var isStarted = false;
function startStop()
{
  if (!isStarted) {
    isStarted = true;
    time();
  } else {
    isStarted = false;
  }
}
function time()
{
  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);

The following is a simple solution using setInterval and clearInterval

var time = 0.0;
var view = document.getElementById('time');
var running = false;
var repeat;

function start(){
    if(running){
        return;
    }
    running = true;
    repeat = setInterval(increment, 100);
}

function stop(){
    clearInterval(repeat);
    running = false;
}

function increment(){
        time += 0.1;
        view.innerText = time.toFixed(1);
}

Demo:

https://jsfiddle/m7bmc2uj/

var timeEl = 0,g;
function start()
{
if(g){
	clearTimeout(g);
  timeEl = 0;
}
  time();
}
function time()
{
  g=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);

tell me what else would you need. or it implements your specification. here button click will start the timer from 0 again.

jsfiddle