How to avoid discontinuity in periodical HTTP request by jQuery? - ajax

Question

I am new to jQuery and want to use it to retrieve data from a server every 3 seconds. The web server sends data every 3 seconds in JSON format. The JSON data contains a numerical array field { "samples" : [10,15,-7,19,34,...] }. I wrote the following jQuery ajax request to retrieve data from the server every 3 seconds:
function getData() {
$.ajax({
url : 'http://example.com',
type: 'GET',
success : function(data) {
myData = data.samples;
setTimeout(getData, 3000);
},
dataType : 'json'
});
return myData;
}
However, due to timing jitter, the data sent from the server may not get updated precisely at every 3 seconds. So how should I write the jQuery ajax request to avoid the possible data discontinuity? That is, I want the returned myData contains all fresh new data array elements from each getData() call and does not contain duplicated or missing data samples due to possible timing jitter.

Answer 1

Send the last timestamp that the data was updated on the server along with the other JSON array. Then, when it is time to request data again using your jQuery call, check the timestamp against what you already have. This will give you a way to know if it is the same data, or if it has been refreshed.

Answer 2

I think you may need pass around more info. Include another field in your AJAX called "lastUpdate" with a timestamp. Your javascript can save the last timestamp it got and provide it to the server. The server responds only with samples after that timestamp (so you don't miss any) and won't respond with anything if its still up to date (so you don't duplicate).

Answer 3

There's little point returning myData. (a) the variable is not declared within the function, and (b) the data arrives asynchronously from the server.
As it stands, getData() is guaranteed (at best) to return the data obtained at the previous iteration.
To work with the freshly obtained data, you need to do whatever is necessary with myData within the success function or in a done() callback, as follows :
function getData() {
$.ajax({
url: 'http://example.com',
type: 'GET',
dataType : 'json'
}).done(function(data) {
var myData = data.samples;
//Do whatever is necessary with myData here.
//Call extenal function as necessary to do the job.
setTimeout(getData, 3000);
});
}

Answer 4

Write your code in such a way that takes advantage of the asynchronous nature of ajax. For example,
var interval;
function handleData(data) {
// I handle the data returned from the ajax request.
console.log(data);
}
function getData() {
// I send the ajax request.
$.ajax({
url: 'http://example.com',
success: handleData,
error: function(){
// on error, stop making requests to help with debugging.
console.log(arguments);
clearInterval(interval);
}
});
}
interval = setInterval(getData,3000);
This will result that in most cases, the responses will come in order. You can make that true in all cases if you get rid of the interval and instead call get data 3 seconds after the previous success.
function getData() {
// I send the ajax request.
$.ajax({
url: 'http://example.com',
success: handleData,
error: function(){
// on error, stop making requests to help with debugging.
console.log(arguments);
}
});
}
function handleData(data) {
// I handle the data returned from the ajax request.
console.log(data);
setTimeout(getData,3000);
}
getData();
Side note: the "timing jitter" isn't a jitter at all, it's simply a logic error. The data is always one set behind due to Ajax being Asynchronous.