title: Detecting if your server is down using query
body: <p>I wrote the following code to make XHR requests to a heartbeat endpoint on my server every 2 seconds. Depending on success or failure I continue the execution or block the UI using Jquery UI block plugin.</p>
  
  <pre><code>var uiBlocked = false;
  window.setInterval(function() {
  $.ajax({
    cache: false,
    type: 'HEAD',
    url: '/heartbeat/',
    timeout: 1000,
    success: function(data, textStatus, XMLHttpRequest) {
     if (uiBlocked == true &amp;&amp; navigator.onLine) {
        uiBlocked = false;
        $.unblockUI();
       }
     },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
      if (uiBlocked == false){
          uiBlocked = true;
          $.blockUI({
             message: "Lost connectivity, please reconnect your VPN.",
             css: {
              border: 'none',
              padding: '15px',
              backgroundColor: '#000',
              '-webkit-border-radius': '10px',
              '-moz-border-radius': '10px',
              opacity: .5,
              color: '#fff'
            } });
     }
    }
  })
  }, 2000);
  </code></pre>
  
  <p>Now my entire UI gets cached at the client and the next calls are ajax calla that change part of the page. The problem is that some of these calls block for more than 2 seconds and at that time the page blocks and user is alerted for connectivity. </p>
  
  <p>How do I avoid this false positive effectively? I cannot increase the timeout value because if I do make the timeout to lets 10 seconds, what if the end user makes a blocking call at the 9th second which blocks for 3 seconds, then again I will get a false positive.</p>
  
  <p>Is there a workaround this situation. </p>