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