0

私は、本質的に自己却下するメッセージを表示することに取り組んでいます。5 秒後、メッセージ バーは消えます。ただし、複数のメッセージが表示されている場合、表示されたメッセージ バーが閉じられると、動作は同じコンテナーに複数のメッセージを表示します。

このため、最初のメッセージでバーを表示したら、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);

私の質問は、最初のメッセージが閉じられる前に別のメッセージが発生した場合、それをキューに入れているということです。ただし、最初のメッセージを閉じてからキューに 2 番目のメッセージを表示するまでにかなりの遅延が必要です。ただし、2 番目のメッセージの表示を遅らせるためのタイムアウトは、すでに 3000 ミリ秒のタイムアウト内であるため、機能しません。

最初のメッセージを閉じて 2 番目のメッセージを表示するのを遅らせるにはどうすればよいですか? 注: 2 番目の setTimeout がなくても機能しますが、遅延はありません。

どんな助けでも大歓迎です。

4

1 に答える 1

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

jsfiddle

于 2013-06-24T23:55:10.337 に答える