Question

我有一个点击startnew按钮时激活的计数器：

<button id="startnew" onclick="counter()">Start new Game</button>

var i = 0;
function counter() {
  var execution = setInterval(function(){
    active() 
  }, 1000);
  function active() {
    i++;
    document.getElementById("timer").innerHTML = i;
  }
}

当我第二次点击startnew按钮时出现问题，其中计数器开始加速，因为内部变量保持不变。我尝试在代码的不同部分添加其他if子句，以检查按钮是否已被点击但到目前为止没有成功。

如果再次点击同一个按钮，如何重置内部变量？

Answer 1

每次点击按钮都会创建一个新的setInterval。

在clearInterval(execution)之前调用setInterval并使var执行全局。还要在函数计数器中声明你的变量。

var execution;

function counter() {
  var i = 0;
  clearInterval(execution);

  execution = setInterval(function() {
    active()
  }, 1000);

  function active() {
    i++;
    document.getElementById("timer").innerHTML = i;
  }
}

<button id="startnew" onclick="counter()">Start new Game</button>
<br>
<span id="timer"></span>

Answer 2

我希望我理解你的要求......

在全局范围

中创建变量execution

var i = 0;
var execution;

function counter() {
  if (i === 0) {
    execution = setInterval(function() {
      active()
    }, 1000);
  } else {
    clearInterval(execution);
    i = 0;
    document.getElementById("timer").innerHTML = '';
  }

  function active() {

    i++;
    document.getElementById("timer").innerHTML = i;

  }
}

<button id="startnew" onclick="counter()">Start new Game</button>

<span id='timer'></span>

单击第二个按钮后，Javascript计数器会加速

2 个答案: