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

当我点击按钮时如何让我的setTimeout函数停止启动
如果我点击按钮的次数越来越多，防止计数越来越快。

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

Answer 1

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

我希望此代码能够解决问题

JSFiddle

使用setInterval和clearInterval可以实现相同的效果。试试这个JSFiddle

Answer 2

每次按下按钮，您都会获得计时器运行的第二份副本，这样可以加快您的时间。

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 3

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

Answer 4

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

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

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

以下是使用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/

使用按钮＆amp;开始/停止setTimeout通过更多点击来防止计算更快

7 个答案: