Reset countdown interval with clearInterval doesn't work

Question

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!

Answer 1

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