使用按钮启动/停止setTimeout并通过更多点击防止更快地计数

Question

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.net/pb4759jh68/0618eLoe/

Answer 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

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

Answer 3

您可以使用clearTimeout取消之前设置的超时 - 请参阅https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout 。

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

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

Answer 6

 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

Answer 7

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/