Javascript 类似Gmail的倒计时计时器不工作

我一直在尝试重新创建一个倒计时计时器，类似于gmail在您断开互联网连接时使用的计时器。ajax请求失败，然后开始一个短的倒计时，然后发出另一个ajax请求，如果再次失败，则开始更长的倒计时，以此类推。一旦达到确定的倒计时值（比如1分钟），倒计时将保持在1分钟，直到恢复internet连接或服务器返回

我不想使用插件，因为这段代码将嵌入一个空间有限的微控制器中，出于实际原因，我也不希望将其作为外部文件放置，即使jQuery库已经是外部文件

所有操作都应触发

onload

，并自动继续（即不使用任何控制输入）

到目前为止，我已经开发了一些代码，如果ajax请求立即成功或失败，那么这些代码可以实现我想要的功能，但是如果ajax请求状态存在延迟（例如，关闭服务器），浏览器将不会立即产生结果，我的代码也会失败

我知道我上面所说的，因为我实际上关闭了服务器，并且在Mozilla Firefox上的firebug的帮助下，看到ajax结果（成功或失败）没有立即触发，而是一直等待几秒钟

救命啊

html代码：

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

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

     });

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

jQuery代码：

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

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

     });

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

$（文档）.ready（函数（）
{ 
//当DOM准备就绪时执行-http://api.jquery.com/ready/
var timerSpeed=[1000,5000,10000,20000,30000,60000]；
//自1970年1月1日起的当前时间（毫秒），加上初始重新加载间隔
var end=（新日期）.getTime（）+timerSpeed[1]；
var n=0；
var m=0；
setInterval（函数（）
{
var now=（新日期）.getTime（）；
//当前剩余的重新加载时间（秒），有时会变为负值，见下文
var secLeft=数学地板（（结束-现在）/1000）；
//如果secLeft是负数乘以零…等于secLeft=0，这将产生大约1秒的误差
var timeToload=（secLeft<0）？secLeft*0:secLeft；
如果（n！=0）
{ 
//检查请求是否失败或延迟\n\
$（'#tempFail'）.html（'响应失败或延迟。将自动加载：'+timeToload+'seconds！'）；
}
如果（（secLeft）您要求提供一个示例，因此我编写了以下内容，那么您可能希望将函数的内容包装到另一个函数中，这样您就可以重复它/不必担心名称空间/等等。没有进行测试，所以不要期望没有bug

对每个操作使用
window.setTimeout
，将每个阶段分离为自己的函数，以便更容易遵循代码路径

$(document).ready(function () { // http://api.jquery.com/ready/
    var $tempFail = $('#tempFail'),
        delay = [1000, 5000, 10000, 20000, 30000, 60000],
        delay_index = 0,
        delay_ends = 0,
        inform_user_ref = null,
        inform_user = function inform_user() {
            var now = (new Date).getTime(),
                delta; // for difference, calculate later
            if (delay_ends > now) { // if we're waiting for a retry
                delta = Math.floor((delay_ends - now ) / 1000); // calculate time to wait
                $tempFail.html('Failed or delayed response. Will auto load in: '+delta+ ' seconds!'); // let people know
                window.setTimeout(inform_user, 200); // loop countdown timer
                // can fast refresh this as it's just a countdown
            }
        },
        get_success = function () {
            $tempFail.html('');
            // .. code on success
        },
        get_fail = function () {
            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 () {
            $.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
});

$（document）.ready（函数（）{/）http://api.jquery.com/ready/
var$tempFail=$（“#tempFail”），
延迟=[1000,5000,10000,20000,30000,60000]，
延迟指数=0，
延迟_结束=0，
通知用户\u ref=null，
通知用户=函数通知用户（）{
var now=（新日期）.getTime（），
delta；//对于差异，请稍后计算
如果（delay_ends>now）{//如果我们正在等待重试
delta=Math.floor（（delay_ends-now）/1000）；//计算等待时间
$tempFail.html（'Failed或delayed response.Will auto load in:'+delta+'seconds！'）；//让人们知道
setTimeout（通知用户，200）；//循环倒计时计时器
//可以快速刷新这个，因为它只是一个倒计时
}
},
get_success=函数（）{
$tempFail.html（“”）；
//…成功的准则
},
get_fail=函数（）{
延迟索引<5&&++delay\u index；//增量延迟索引
get_initialise（）；//重试
clearTimeout（通知用户）；//删除任何旧的倒计时计时器
inform_user_ref=inform_user（）；//并显示新的倒计时
},
get\u try=函数（）{
$.getScript（'script\u vars.js'））
.完成（获得成功）
.失败（获得失败）；
},
get_initialise=函数（）{
delay_ends=（新日期）.getTime（）+delay[delay_index]；
setTimeout（get\u try，delay[delay\u index]）；//重试
};
get_initialise（）；//initial
});
哇！保罗先生。你的代码非常好。我只是做了几次调整，让它在我需要的时候完美地工作

在ajax成功的基础上添加了以下内容：

延迟索引=0；//重置延迟索引

get_initialise(); // retry

因此，如果一切正常，我会让代码每5秒运行一次

二,

添加了两个新变量：
let_cntDwn_end
和
ajax_rqst_status
，以避免倒计时数字跳转（在开始下一个倒计时之前让倒计时结束），并在ajax请求未给出任何结果时显示消息

以下是新代码：

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

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

     });

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

$（document）.ready（函数（）{//DOM就绪时执行-http://api.jquery.com/ready/
var$tempFail=$（“#tempFail”），
延迟=[5000,5000,10000,20000,30000,60000]，
延迟指数=0，
延迟_结束=0，
通知用户\u ref=null，
设_cntDwn_end=0，
ajax\u rqst\u status=0，//触发ajax成功或失败
通知用户=函数通知用户（）{
var now=（新日期）.getTime（），
delta；//用于差异，稍后计算
如果（delay_ends>now）{//如果我们正在等待重试
设_cntDwn_end=1；
delta=Math.floor（（delay_ends-now）/1000）；//计算等待时间
如果（ajax\u rqst\u status==0）{
$tempFail.html（'Failed response.Will auto load in:'+delta+'seconds！'）；//让人们知道
window.setTim