1

インターネットから切断されたときにgmailが使用するものと同様のカウントダウンタイマーを再作成しようとしています。ajax リクエストが失敗すると、短いカウントダウンが開始され、別の ajax リクエストが行われ、再び失敗した場合は、より長いカウントダウンが開始されます。決定されたカウントダウン値 (たとえば 1 分) に達すると、インターネット接続が回復するか、サーバーが復旧するまで、カウントダウンは 1 分に維持されます。

このコードは、スペースが限られているマイクロコントローラーに埋め込まれ、jQuery ライブラリが既に外部にあるにもかかわらず、実用的な理由から外部ファイルとして配置したくないため、プラグインを使用したくありません。

すべてがトリガーonloadされ、自動的に続行されます (つまり、制御入力は使用されません)。

これまでのところ、ajax リクエストが成功または失敗した場合に必要なことを実行するコードを開発しましたが、ajax リクエストのステータスに遅延がある場合 (サーバーがダウンしている場合など)、ブラウザーはすぐに結果を生成せず、私のコードは失敗します。

私は実際にサーバーを停止し、Mozilla Firefox の firebug の助けを借りて、ajax の結果 (成功または失敗) がすぐにトリガーされず、数秒間待機し続けることを確認したため、上記で述べたことを知っています。

助けてください！

html コード:

<div id='tempFail' ></div>

jQuery コード:

$(document).ready(function()
{ 
    //do when DOM ready - http://api.jquery.com/ready/

    var timerSpeed = [1000, 5000, 10000, 20000, 30000, 60000];

    // current time in ms since 1/1/1970, plus the initial reload interval
    var end = (new Date).getTime() + timerSpeed[1];  
    var n=0;
    var m=0;

    setInterval(function() 
    {
        var now = (new Date).getTime();
        // Current time left to re-load in seconds, sometimes it goes to negative values, see below 

        var secLeft = Math.floor(( end - now ) / 1000);

        // if secLeft is negative multiply by zero...equal to secLeft=0, this will produce an error of one second approximately      
        var timeToload = (secLeft < 0) ? secLeft * 0 : secLeft;  

        if (n!=0) 
        { 
            //check for failed or delayed request\n\       

            $('#tempFail').html('Failed or delayed response. Will auto load in: '+timeToload+ ' seconds!'); 
        }

        if( (secLeft)<=0)// if reload time is reached do
        {                      

            if (m==0)//used to prevent multiple continue reloads when ajax request status is not yet defined
            {                            

                m=1;    

                $.getScript('script_vars.js').done(function (data) 
                {         
                    //if request succeeded
                    m=0;
                    n = 0;
                    end = (new Date).getTime() + timerSpeed[1];  
                    // Time to load after the initial interval set above
                    $('#tempFail').html(''); 

                //other code on success  here         
                })
                .fail(function() 
                {      
                    //if request failed
                    m=0;
                    n ++;
                    if(n==6) n=5;

                   switch(n){         //timer delay for failed request\n\


                     case 1:

                       end = (new Date).getTime() + timerSpeed[1];
                       break;

                     case 2:

                        end = (new Date).getTime() + timerSpeed[2];
                       break;

                     case 3:

                        end = (new Date).getTime() + timerSpeed[3];
                       break;

                     case 4:

                       end = (new Date).getTime() + timerSpeed[4];
                       break;

                     case 5:

                        end = (new Date).getTime() + timerSpeed[5];
                       break;  
                  } 


               });      

         }
        }                


        }, 1000);

     });
4

3 に答える 3

0

ajax リクエストを監視することでこれを処理する JS lib もあります。

https://github.com/HubSpot/offline

于 2013-11-11T10:22:03.587 に答える
0

わお！ポール S 氏。あなたのコードは非常に優れていました。必要に応じて完全に機能するように、いくつかの調整を行いました。

  1. ajax の成功について以下を追加しました。

遅延_インデックス = 0; // delay_index をリセット

get_initialise(); // retry

すべてがうまくいけば、5秒ごとにコードを実行し続けます。

2.

2 つの新しい変数が追加されました:let_cntDwn_endとajax_rqst_statusカウントダウン数のジャンプを回避するため (次のカウントダウンを開始する前にカウントダウンを終了させるため)、および ajax リクエストが結果を与えていない間にメッセージを表示するためです。

新しいコードは次のとおりです。

$(document).ready(function(){ //do when DOM ready - http://api.jquery.com/ready/



    var $tempFail = $('#tempFail'),
        delay = [5000, 5000, 10000, 20000, 30000, 60000],
        delay_index = 0,
        delay_ends = 0,
        inform_user_ref = null,
        let_cntDwn_end = 0,      
        ajax_rqst_status = 0,    //ajax success or failure triggered
        inform_user = function inform_user() {
            var now = (new Date).getTime(),
                delta; // for difference, calculated later
            if (delay_ends > now) { // if we're waiting for a retry
                let_cntDwn_end = 1;
                delta = Math.floor((delay_ends - now ) / 1000); // calculate time to wait
                if (ajax_rqst_status==0){
                  $tempFail.html('Failed response. Will auto load in: '+delta+ ' seconds!'); // let people know
                  window.setTimeout(inform_user, 900); // loop countdown timer
                  // can fast refresh this as it's just a countdown
                }
            }
            else {let_cntDwn_end = 0; get_try();}
        },
        get_success = function () {
               ajax_rqst_status =0;
               $tempFail.html('');
               // .. code on success           

               delay_index = 0; //reset delay_index
               get_initialise(); // retry           
        },
        get_fail = function () {                        
            ajax_rqst_status =0;
            delay_index < 5 && ++delay_index; // increment delay_index
            get_initialise(); // retry  
            window.clearTimeout(inform_user_ref); // remove any old countdown timer
            inform_user_ref = inform_user(); // and display new countdown

        },
        get_try = function () {
            if (let_cntDwn_end == 0){

                    ajax_rqst_status=1;
                   $tempFail.html('Waiting for Ajax request success or failure'); // let people know    

            $.getScript('script_vars.js')
                .done(get_success)
                .fail(get_fail);
                }
        },
        get_initialise = function () {
            delay_ends = (new Date).getTime() + delay[delay_index];
            window.setTimeout(get_try, delay[delay_index]); // retry
        };
    get_initialise(); // initial
});
于 2013-04-05T23:44:46.437 に答える