javascript倒计时计时器闪烁多次调用

Question

function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    var interval = setInterval(function() {
        var el = document.getElementById(element);
        // if the time is 0 then end the counter

        if(time == 0) {
            //el.innerHTML = "countdown's over!";
         // document.getElementById("timer").style.visibility="hidden";
            clearInterval(interval);
            return;
        }
        var hour=Math.floor( time / (60*60) );
        if (hour < 10) hour = "0" + hour;
        var minutes = 0;
        if(time>=60 && hour>0)
            minutes=Math.floor( (time / 60 )-60);
        else{
            minutes=Math.floor( (time / 60 ));
        }
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds; 
      //  var text = hour+":"+minutes; //+ ':' + seconds;
        var text = minutes; //+ ':' + seconds;

        el.innerHTML = text;
        time--;
    }, 1000);
}

when i am calling the method 2wice, its creating flickering effect. ie countdown(element, 50, 0); it count downs but if i call it again ie countdown(element, 35, 0); it is flicks showing both the countddowns

Answer 1

You need to cancel the interval when the plugin initializes if you are going to call it on the same element. Otherwise you are running two intervals at once.

I'd suggest returning the interval from your function and allowing yourself to pass that interval in as a parameter. That way you can always cancel the interval before starting it (in case there is already one going). If you pass null for the interval var, you can still run clearInterval() without throwing errors.

For example:

function countdown(element, minutes, seconds, interval) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    clearInterval(interval);
    return setInterval(function() {
...

Your first call could be:

var savedInterval = countdown('some-ele-id', 1, 1, null);

And your second call could be:

var interval = countdown('some-ele-id', 1, 1, savedInterval);

Another solution would be to save the interval as a global variable and cancel it without passing it as a parameter inside your plugin.

Answer 2

An alternative to avoid modify your code is:

var interval;
...
function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    interval = setInterval(function() {
...

And in your second call:

clearInterval(interval);
countdown(element, 35, 0);