setInterval and clearInterval within same function

I have this message(); function:

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 a fading of the latest message. I want the abilit开发者_StackOverflow中文版y to keep making messages occur and if they are 10 seconds within each other the fade not to occur. Basically, if there is a setInterval occurring at the time this function is being run I want to cancel it.

fadeOutDelay is not in the scope of other function calls. You could use a global variable instead:

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

If I understand your question correctly, I think you just have to set your fadeOutDelay var 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);
}

Try this

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

The fadeOutDelay variable needs to be declared outside of this function's scope:

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

Here's a way to do it with no global variables.

And, I think you want to use setTimeout rather than setInterval because you only want the timer to fire once for each message being shown.

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 running the selector over and over 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
}