在查詢時間間隔內顯示倒數計時器

我有一個以下查詢每20秒鐘觸發一次服務器心跳。在查詢時間間隔內顯示倒數計時器

var uiBlocked = false; 
window.setInterval(function() { 
$.ajax({ 
    cache: false, 
    type: 'HEAD', 
    url: '/heartbeat/', 
    timeout: 1000, 
    async: true, 
    success: function(data, textStatus, XMLHttpRequest) { 
    if (uiBlocked == true && navigator.onLine) { 
     uiBlocked = false; 
     $.unblockUI(); 
     } 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
    if(textStatus != 'timeout'){ 
     if (uiBlocked == false){ 
      uiBlocked = true; 
      $.blockUI({ 
      message: "Lost connectivity, please reconnect your machine. ", 
      css: { 
      border: 'none', 
      padding: '15px', 
      backgroundColor: '#000', 
      '-webkit-border-radius': '10px', 
      '- moz-border-radius': '10px', 
      opacity: .5, 
      color: '#fff' 
      } }); 
     } 
    } 
    } 
    }) 
}, 20000);

現在，當服務器不可用時，我顯示消息

連接丟失，請重新連接您的機器。

作爲該消息的一部分欲還顯示：

重試在30（然後20遞減至19，18等）秒

有一種方法在jQuery中獲取間隔時間的鉤子？

來源

2014-11-02 station

這裏有一個簡單的JavaScript計時器http://jsbin.com/porulasari/1/edit?html,js,output – bencripps 2014-11-02 04:13:15

可能重複[簡單的JavaScript倒數計時器的代碼？]（http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer） – ProllyGeek 2014-11-02 04:16:58

您的JavaScript片段不會ap與問題的肉有關的梨。 – Kolban 2014-11-02 04:17:46

這是一個jsFiddle顯示答案。

HTML

<span id="counter"></span>

的JavaScript

$(function() { 
    var counter = 30; 
    function counterFunc() {  
     $("#counter").text(counter); 
     counter--; 
     if (counter > 0) { 
      setTimeout(counterFunc, 1000); 
     } else { 
      $("#counter").text("Done!"); 
     }   
    } 
    counterFunc(); 
});

來源

2014-11-02 04:17:20 Kolban

在查詢時間間隔內顯示倒數計時器

回答

相關問題