How to setTimeout within an already timed function in javascript

Question

I am working on showing a message which is self dismissing in nature. After a time of 5 secs the message bar dismisses itself. However when there are multiple messages showing up, the behaviour is to show multiple messages in the same container , once the displayed message bar is dismissed.

For this, once i show the bar with the first message, Here is teh code to self dismiss after 5 secs

    window.setTimeout(function () {
    bar.getValue('isVisible').setValue(false);
    this.clearMessage(bar);// clears the message
    bar._isShowing = false;
        setTimeout(function() {
            //execute the last action in the queue (if any)
            dequeueAction(); fires the next message in queue.
        }, 100);
     }, 3000);

My question is, when there is another message that was fired before the first message dismissed itself, i am queueing it up. However, I want a considerable delay between dismissing teh first message and showing the second message in the queue. But the timeout to delay showing the second message does not work as it is already within a time out of 3000 ms

How could i accomplish a delay in dismissing the first message and showing the second message? Note: it works without the second setTimeout but it has no delay.

Any help will be appreciated.

Answer 1

I'm not 100% sure I understand your problem. What I think you are saying is you want to:

1. display messages that self-dismiss
2. if a message arrives while one is being displayed, it is queued
3. once the current message self-dismisses, there should be a short pause before displaying the next

With those goals in mind:

//message queue
var msgqueue = Array();
//displaying flag
var msgdisplaying = null;

//clear message and hide box/bar
function clearMessage() {
    msgdisplaying = null;
    $('#msgbox').css('display','none');
}   

//queue message, start display if no message showing
function displayMessage(msg) {
    msgqueue.push(msg);
    if (msgdisplaying === null) showMessage();
}

//display message and set dismiss/delay timers
function showMessage() {
    if (msgqueue.length > 0) {
        $("#msgbox").html("<h1>" + msgqueue.shift() + "</h1>").css('display','block');
        //dismiss this message after 3 seconds
        setTimeout("clearMessage();",3000);
        //display next message (if any) 0.1 seconds after dismissing
        msgdisplaying = setTimeout("showMessage();", 3100);
    }          
}

jsfiddle

If you are going to use the jQuery .animate function to animate showing/hiding the message div, set the timeout for the next block using the callback argument to avoid timeouts firing during the animation

//show
$("#msgbox").html("<h1>" + msgqueue.shift() + "</h1>")
$("#msgbox").animate({ 'opacity': 1 }, 500, 'swing', function() { 
   msgdisplaying = setTimeout("dismissMessage();", 3000) 
 });

//hide
$("#msgbox").animate({ 'opacity': 0 }, 500, 'swing', function(){ 
   if (msgqueue.length > 0) 
      msgdisplaying = setTimeout("showMessage();", 1000) 
   } else { 
      msgdisplaying = null 
   });

jsfiddle