當定時器完成時彈出多次警報窗口

Question

我正在使用JS的簡單定時器。當計時器達到0時，我想要「時間到！」彈出。

$(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()錯誤，當我打開了開發者控制檯，它說：

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

不過，我不知道該怎麼改變，使其正常運行。

Answer 1

根據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）返回未定義，setInterval將沒有什麼可以執行下一次。

對於其他問題（如：局部變量），你可以聲明變量「一個時間間隔」在這樣一個全球性的功能：

window.timeInterval = setInterval(updateClock, 1000); 

這將確保全球variaable（即價值：一個時間間隔）可立即用於定時器處理程序。

的例子：

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

您也可以每次緩存你的分和秒的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>

Answer 2

你的變量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); 
    }; 
}