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

Question

I'm working on a simple timer using JS. When the timer hits 0, I want "time up!" to pop up.

$(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);
    };
}

Right now, the alert pops up multiple times. I suspect it's because I'm using clearInterval() incorrectly—when I open up the developer console, it says:

"Uncaught ReferenceError: timeInterval is not defined at updateClock."

However, I'm not sure what to change to make it function correctly.

Answer 1

Your variable timeInterval is inside $(document).ready(...)

Try this:

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

According to MDN doc :

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);

var intervalID = window.setInterval(code, delay);

where:

func

  A function to be executed every delay milliseconds. 

This means that if you call this function with first parameter like:

updateClock()

the updateClock function is executed and the result code is returned to the setInterval function. But, because such a function (ie: updateClock) returns undefined, the setInterval will have nothing to execute the next times.

For the other problem (ie: local variable) you may declare the variable "timeInterval" as a global function in this way:

window.timeInterval = setInterval(updateClock, 1000);

This will assure the value of the global variaable (ie: timeInterval) is available to the timer handler immediately.

The example:

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

You might also cache your min and sec dom elements instead to searches for them every time:

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