Show countdown in query interval

Question

I have a following query that hits a server heartbeat every twenty seconds.

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

Now when the server is unavailable, I show the message

Lost connectivity, please reconnect your machine.

As a part of that message I want to also show:

Retrying in 30 (then 20 decrementing to 19, 18 and so on) seconds

Is there a way in jQuery to get hook of the interval time?

here's a simple javascript timer http://jsbin.com/porulasari/1/edit?html,js,output — bencripps, Nov 02 '14 at 04:13
possible duplicate of [Code for a simple JavaScript countdown timer?](http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer) — ProllyGeek, Nov 02 '14 at 04:16
Your JavaScript fragment doesn't appear relevant to the meat of the question. — Kolban, Nov 02 '14 at 04:17

score 0 · Accepted Answer · answered Nov 02 '14 at 04:17

Here is a jsFiddle showing an answer.

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

Show countdown in query interval

1 Answers1