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的索引而不是间隔本身来实现。

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

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

2 个答案: