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

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

How do I get my setTimeout function to start on stop when I click on the button
How to prevent my counting from going faster the more times I click on the button.

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

回答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;
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

回答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;
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);

回答3:

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

回答4:

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

回答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;
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);

回答6:

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.net/m7bmc2uj/

回答7:

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

来源：https://stackoverflow.com/questions/36733692/start-stop-settimeout-with-a-button-prevent-counting-faster-with-more-clicks

标签

javascript

recursion

settimeout