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

Answer 2

我可以通过在外部定义一个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);
    }