jQuery - タイムアウトのバナーを作成する

Question

「読み込み中」というバナーを作成して、アプリケーションが終了したら非表示にします。

<div id="ajaxBanner"></div> 


function ajaxBanner(action, confirmMsg) { 

    if (action == 'show') { 
     $('#msg').text('Loading...'); 
     $('#ajaxBanner').show(); 
    } else if (action == 'hide') { 
     $('#ajaxBanner').fadeOut(); 
    } else if (confirmMsg == true) { 
     $('#ajaxBanner').show(); 
     ajaxBanner_timeout = setTimeout(ajaxBanner('hide'), 2000); 
    } 
}; 

この関数は、ユーザーに「読み込み中」バナーメッセージを表示して後で非表示にします。問題は、「XXXX XXXに追加」のような確認メッセージにこのスペースを使用することです。

confirmMsgがtrueの場合、Actionショーを実行した後のAJAX呼び出しで問題が発生します。

ajaxBanner_timeoutが完了したら、アクションは== showまたはaction == hideとすることはできますか？

Answer 1

1つの問題は、setTimeout（）は、文字列または無名関数を使用する関数呼び出しを受け取りません。setTimeout("ajaxBanner('hide')", 2000);です。今すぐ機能はすぐにno pauseと呼ばれます。もう1つの方法は

setTimeout(function(){ 
    //do something; 
},2000); 

です。これが良い方法です。

Answer 2

問題は、関数リファレンスを渡す代わりに、あなたのsetTimeoutでajaxBanner（ 'hide'）を呼び出すことです。匿名関数であなたのajaxBanner（「隠す」）をラッピング問題を解決します：あなたはあなたのJavaScriptコンソールで行うことができます

setTimeout(function() { ajaxBanner('hide'); }, 2000); 

説明/テスト：

違いを確認する1つの方法は貼り付けることですこれはあなたのFirebugコンソールで、それを実行します。

グッド：

// alert fires in 5 seconds 
setTimeout(function() { alert('hide'); }, 5000); 

悪い：

// alert fires right away, despite the 5 second delay 
setTimeout(alert('hide'), 5000); 

UPDATE：それは問題では上記のコード例では不要だと私は変数にはsetTimeoutイベントを割り当てていないです注意。

Answer 3

var ajaxBanner_callback = function(){}; 
function ajaxBanner(action, confirmMsg) { 

    if (action == 'show') { 
     var ajaxBanner_callback = function() { 
     $('#msg').text('Loading...'); 
     $('#ajaxBanner').show(); 
     } 
    if (!ajaxBanner_timeout) ajaxBanner_callback(); 
    } 
    else if (action == 'hide') { 
     var ajaxBanner_callback = function() { 
     $('#ajaxBanner').fadeOut(); 
     } 
    if (!ajaxBanner_timeout) ajaxBanner_callback(); 
    } 
    else if (confirmMsg == true) { 
     $('#ajaxBanner').show(); 
     ajaxBanner_timeout = setTimeout(function() { 
     ajaxBanner_callback(); 
     clearTimeout(ajaxBanner_timeout); 
     ajaxBanner_callback = function(){}; 
     }, 2000); 
    } 
}; 

必要に応じてconfirmMsgと同じことができます。

ajaxBanner_timeout == 0は、それが完了している場合には$.queue()