2013-06-24 41 views
0

我正在努力顯示自然消失的消息。 5秒後,消息欄自行解除。但是,當顯示多條消息時,一旦顯示的消息欄被解除,行爲就是在同一個容器中顯示多條消息。如何在javascript中的已定時函數中設置超時值

爲此, 一旦我表現出與第一條消息了吧,這是後5秒

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

我的問題是,當存在被前率先打響另一消息德代碼自行解散消息自行解散,我正在排隊。但是,我希望在解除第一條消息和顯示隊列中的第二條消息之間有相當長的時間。但是,延遲顯示第二條消息的超時不起作用,因爲它已經在3000毫秒以內的時間內

我怎麼能在解僱第一條消息和顯示第二條消息方面做出延遲? 注意:它沒有第二個setTimeout,但它沒有延遲。

任何幫助將不勝感激。

+0

那不是3000秒,它是3000毫秒,這隻有3秒。 –

+0

是的,我明白。那是一個錯字。 – emeryville

+0

不用擔心,只是檢查。 –

回答

0

我不是100%確定我理解你的問題。我想你說的是你想:

  1. 顯示信息,自我解散
  2. 如果在一個正在顯示一個消息到達時,排隊
  3. 一旦目前的消息自駁回,應該有一個短暫的停頓在顯示下一個

考慮到這些目標之前:

//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

如果你要使用jQuery的.animate功能,動畫顯示/隱藏消息DIV,使用回調參數來避免超時動畫

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

在燒製過程中設置超時下一個塊​​