SetInterval and clearInterval inside the same function

Question

I have this function message();:

function message(kind, text){   
    if(fadeOutDelay != undefined){
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    var fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

The problem is that I am trying to clear the interval when the function is re-run to prevent the last message from fading. I want you to continue creating messages, and if they are 10 seconds inside each other, the disappearance will not happen. Basically, if at the time this function is executed, it exists setInterval, I want to cancel it.

Answer 1

fadeOutDelaynot included in the scope of other function calls. Instead, you can use a global variable:

var fadeOutDelay;
function message(kind, text){   
    if(fadeOutDelay != undefined){
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

Answer 2

If I understand your question correctly, I think you just need to install your fadeOutDelayvar global.

var fadeOutDelay; //global var.

function message(kind, text){   
    if(fadeOutDelay != undefined){
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

Answer 3

var fadeOutDelay = null;
function message(kind, text){   

    if(fadeOutDelay){
       clearInterval(fadeOutDelay);
       fadeOutDelay = null;
    }

    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

Answer 4

A variable fadeOutDelaymust be declared outside the scope of this function:

var fadeOutDelay = null;

function message(kind, text){   
    if(fadeOutDelay) {
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(
        function() { $("#message").fadeOut(2000); },
        10000
    );
}

Answer 5

Here you can do this without global variables.

And, I think you want to use setTimeout, not setInterval, because you want the timer to run only once for each message displayed.

I also reordered the initial operations on the message object, so the data and class are set before you show it, and saved the jQuery object once in a local variable, rather than starting the selector again and again.

function message(kind, text){   
    var m = $('#message');
    m.text(text);
    m.attr('class', kind);
    m.show();
    var timer = m.data("timer");         // get previous timer value
    if (timer) {
        clearTimeout(timer);             // clear timer, if still running
    }
    timer = setTimeout(function() {
        m.fadeOut(2000);
        m.data("timer", null);      // clear stored timer
    },10000);
    m.data("timer", timer);         // store timer as data on the object
}