当计时器结束时，警报窗口会多次弹出。
当计时器结束时，警报窗口会多次弹出。
提问于 2016-12-30 20:26:21
我正在用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() --当我打开开发人员控制台时，它说：
“未定义的ReferenceError: timeInterval不在updateClock中定义。”
但是，我不知道要修改什么才能使它正常工作。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-30 21:25:24
根据MDN文档
var intervalID = window.setInterval(func，delay，param1，param2，.)； var intervalID =window.setInterval(码，延迟)；
其中：
功能 每延迟毫秒执行一次的函数。
这意味着，如果使用第一个参数调用此函数，则如下所示：
updateClock()执行updateClock函数，并将结果代码返回给setInterval函数。但是，因为这样的函数(即: updateClock)返回未定义的函数，所以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>
Stack Overflow用户
发布于 2016-12-30 20:33:08
变量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);
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41402280
复制相关文章
相似问题
腾讯云开发者
