CODEWITHSUNDEEP
javascriptsetintervalcountdownclearinterval
gerpaick
gerpaick

Reputation: 799

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. 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.

How can I reset ongoing counter?

Thanks for your help!

Upvotes: 0

Views: 979

Answers (2)

SeraphimFoA
SeraphimFoA

Reputation: 466

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.

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

Upvotes: 1

Volune
Volune

Reputation: 4339

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/

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

Upvotes: 4

Related Questions