Question

我正在使用JS处理一个简单的计时器。当计时器达到0时，我希望＆＃34;时间到了！＆＃34;弹出。

$(document).ready(function() {
    updateClock();
    var timeInterval = setInterval(updateClock(), 1000);
});

var ms = 5000;

function updateClock() {
    ms -= 1000;
    var minutes = Math.floor(ms / 1000 / 60);
    var seconds = Math.floor((ms / 1000) % 60);
    $('#minutes').html(minutes);
    $('#seconds').html(seconds);
    if (ms <= 0) {
        alert('Time is up!');
        clearInterval(timeInterval);
    };
}

现在，警报会多次弹出。我怀疑它是因为我错误地使用clearInterval() - 当我打开开发者控制台时，它说：

＆＃34;未捕获的ReferenceError：updateClock中未定义timeInterval。＆＃34;

但是，我不确定要更改什么才能使其正常运行。

Answer 1

您的变量timeInterval位于$(document).ready(...)

内

试试这个：

var timeInterval;

$(document).ready(function() {
    updateClock();
    timeInterval = setInterval(updateClock(), 1000);
});

var ms = 5000;

function updateClock() {
    ms -= 1000;
    var minutes = Math.floor(ms / 1000 / 60);
    var seconds = Math.floor((ms / 1000) % 60);
    $('#minutes').html(minutes);
    $('#seconds').html(seconds);
    if (ms <= 0) {
        alert('Time is up!');
        clearInterval(timeInterval);
    };
}

Answer 2

根据MDN doc：

var intervalID = window.setInterval（func，delay [，param1，param2，...]）;

var intervalID = window.setInterval（code，delay）;

其中：

FUNC

      A function to be executed every delay milliseconds.

这意味着如果使用第一个参数调用此函数，如：

updateClock()

执行updateClock函数，并将结果代码返回给setInterval函数。但是，因为这样的函数（即：updateClock）返回undefined，所以setInterval下次没有任何内容可以执行。

对于另一个问题（即：局部变量），你可以用这种方式将变量“timeInterval”声明为全局函数：

window.timeInterval = setInterval(updateClock, 1000);

这将确保全局可变值（即：timeInterval）的值立即可用于计时器处理程序。

示例：

$(document).ready(function() {
  window.timeInterval = setInterval(updateClock, 1000);
});

var ms = 10000;

function updateClock() {
  ms -= 1000;
  var minutes = Math.floor(ms / 1000 / 60);
  var seconds = Math.floor((ms / 1000) % 60);
  $('#minutes').text(minutes);
  $('#seconds').text(seconds);
  if (ms <= 0) {
    setTimeout(function() { // this to refresh before alert
      alert('Time is up!');
    }, 10);
    clearInterval(timeInterval);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span id="minutes">0</span>:<span id="seconds">10</span>

您也可以缓存min和sec dom元素，而不是每次都搜索它们：

$(document).ready(function() {
  var minObj = $('#minutes');
  var secObj = $('#seconds')
  window.timeInterval = setInterval(function () {
    updateClock(minObj, secObj);
  }, 1000);
});

var ms = 10000;

function updateClock(minObj, secObj) {
  ms -= 1000;
  var minutes = Math.floor(ms / 1000 / 60);
  var seconds = Math.floor((ms / 1000) % 60);
  minObj.text(minutes);
  secObj.text(seconds);
  if (ms <= 0) {
    setTimeout(function() { // this to refresh before alert
      alert('Time is up!');
    }, 10);
    clearInterval(timeInterval);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span id="minutes">0</span>:<span id="seconds">10</span>

计时器完成后，警报窗口会多次弹出

2 个答案: