[英]Reset countdown interval with clearInterval doesn't work
I don't know how to reset ongoing counter. 我不知道如何重置正在进行的计数器。 I have two counters on my page.
我的页面上有两个柜台。 It seems it works properly, but when I want to set new value to counter2 when it is still counting down, I see in my div two counting times.
看来它工作正常,但是当我想在仍要递减计数的情况下为counter2设置新值时,我在div中看到了两个计数时间。 New and old one.
新老。
var interval1;
var interval2;
function countdown(element, minutes, seconds, timer) {
var el = document.getElementById(element);
clearInterval(timer);
timer = setInterval(function() {
if(seconds == 0) {
if(minutes == 0) {
(el.innerHTML = "---");
clearInterval(timer);
return;
}
else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
}
else {
var minute_text = '';
}
var second_text = seconds > 1 ? '' : '';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}
function setCounter1(mins) {
countdown('timeLeft', mins, 00, interval1);
}
function setCounter2(mins) {
countdown('timeLeft2', mins, 00, interval2);
}
If for example I have set counter2 for 10mins, and after a minute I call setCounter2(3), I see in my timeLeft2 div two counters. 例如,如果我将counter2设置为10分钟,并且在一分钟后调用setCounter2(3),则在timeLeft2 div中会看到两个计数器。
How can I reset ongoing counter? 如何重置正在进行的计数器?
Thanks for your help! 谢谢你的帮助!
Reassigning an argument variable inside a function does not modify the argument outside of the function. 在函数内部重新分配参数变量不会在函数外部修改参数。 You can see a demonstration of that fact here : http://jsfiddle.net/t6z5324y/
您可以在这里看到该事实的演示: http : //jsfiddle.net/t6z5324y/
var outsideVariable = 0;
console.log('start', outsideVariable);
function foo(insideVariable) {
console.log('before', insideVariable);
insideVariable = 1;
console.log('before', insideVariable);
}
foo(outsideVariable);
console.log('end', outsideVariable);
But you can pass an object as an argument, and modify a member of that object inside the function. 但是您可以将一个对象作为参数传递,并在函数内部修改该对象的成员。 The solution will then be:
解决方案将是:
var intervalHolder1 = {timer: null};
var intervalHolder2 = {timer: null};
function countdown(element, minutes, seconds, timerHolder) {
//stuff
clearInterval(timerHolder.timer);
timerHolder.timer = setInterval(function() {
//stuff
}, 1000);
}
function setCounter1(mins) {
countdown('timeLeft', mins, 00, intervalHolder1);
}
function setCounter2(mins) {
countdown('timeLeft2', mins, 00, intervalHolder2);
}
I would do it by defining an array of Interval outside (how many you need) and making your function pass the Index of the Interval rather then the interval itself. 我可以通过在外部定义一个Interval数组(需要多少个)并让您的函数传递Interval的索引而不是Interval本身来做到这一点。
var interval1;
var interval2;
var arrayInterval = [interval1, interval2];
function countdown(element, minutes, seconds, timerId) {
var el = document.getElementById(element);
clearInterval(arrayInterval[timerId]);
arrayInterval[timerId] = setInterval(function() {
if (seconds == 0) {
if (minutes == 0) {
(el.value = "---");
clearInterval(arrayInterval[timerId]);
return;
} else {
minutes--;
seconds = 60;
}
}
if (minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? '' : '';
el.value = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}
function setCounter1(mins) {
countdown('timeLeft', mins, 00, 0);
}
function setCounter2(mins) {
countdown('timeLeft2', mins, 00, 1);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.