javascript - 使用clearInterval重置倒计时间隔不起作用

Question

我不知道如何重置正在进行的计数器。我的页面上有两个计数器。看起来它工作正常，但是当我想在 counter2 仍在倒计时时为其设置新值时，我在 div 中看到两个计数时间。新的和旧的。

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

例如，如果我将 counter2 设置为 10 分钟，一分钟后我调用 setCounter2(3)，我会在 timeLeft2 div 中看到两个计数器。

如何重置正在进行的计数器？

感谢您的帮助!

Answer 1

在函数内部重新分配参数变量不会修改函数外部的参数。您可以在这里看到这一事实的演示: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);

但是您可以传递一个对象作为参数，并在函数内修改该对象的成员。解决方案将是:

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