ajax settimeout刷新div

Question

I am displaying a graph using jQplot to monitor data. To refresh the div holding the graph, I invoke an ajax call every 5 seconds (see JavaScript excerpt below). On the server, a PHP script retrieves the data from a database. On success, the ajax call is reinvoked after 5 seconds with a JavaScript setTimeout(ajax,5000). On error, the ajax call is retried 10 times with setTimeout(ajax,5000) before displaying an error message. Monitoring XHR learns that the browser crashes after approximately 200 requests. As a temporary remedy, a location.reload() is issued after 50 iterations to prevent the browser from crashing. This works, but is not an ideal situation. Any better solution to this problem is very much appreciated.

Thanks and regards, JZB

function ajax() {
  $.ajax({
    cache: false,
    url: 'monitor.php',
    data : { x: id },
    method: 'GET',
    dataType: 'json',
    success: onDataReceived,
    error: onDataError
  });

  function onDataReceived(series) {
    $('#chartdiv_bar').html('');
    $.jqplot('chartdiv_bar', [series['initHits']], CreateOptions(series,'Inits'));

    errorcount = 0;
    setTimeout(ajax, 5000);
  }

  function onDataError(jqXHR, textStatus, errorThrown) {
    errorcount++;
    if (errorcount == 10) {
      alert("No server response:

" + textStatus + "
" + errorThrown);
    } else {
      setTimeout(ajax, 5000);
    }
  }
}

Answer 1

Since you're re-calling ajax() after a good or fail ajax call, you're starting multiple timers. This is why your browser is crashing.

you may want to try to clear the current timer and then start the next timer

var t; //global

In each of your call back functions:

if(t)      
 clearTimeout(t);
t = setTimeout(ajax, 5000);

more info on timer here: w3 school