在查询时间间隔内显示倒数计时器

我有一个以下查询每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

在查询时间间隔内显示倒数计时器

回答

相关问题