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

Question

我正在使用 JavaScript，我使用 setTimeout 函数来计数。这是我的代码...

<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. 当我点击按钮时，如何让 setTimeout 函数在停止时启动

2. 如何防止我点击按钮的次数越多计数越快。

我在下面包含了我的 JSFiddle！ https://jsfiddle.net/pb4759jh68/0618eLoe/

Answer 1

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

Answer 2

试试这个 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 3

我只是添加了一个布尔值来说明计数是否已经在运行：

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 4

要停止计时器，您可以使用clearTimeout()，但它确实需要使用setTimeout() 创建的计时器的ID。对setTimeout() 的调用现在将计时器id 保存在timeOut 中，然后检查start() 中timeOut 的内容以查看计时器当前是否正在运行。如果计时器正在运行，则在 clearTimeout(timeOut); 中使用 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);

我希望这段代码能解决问题

JSFiddle

同样可以使用 setInterval 和 clearInterval 来实现。试试这个JSFiddle

Answer 5

每次按下按钮，您都会获得第二个计时器副本，这会加快您的时间。

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

我会推荐这样的东西：

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

以下是使用setInterval和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);
}

演示：

https://jsfiddle.net/m7bmc2uj/