AJAX Webworker Polling with setTimeout

Question

I'm trying to get a webworker to poll a web server interface on the same machine every second or so. Most articles I have read say to avoid setInterval and use setTimeout instead but I have yet to find an example that uses AJAX instead of Jquery.

The code I have so far is below:

(function poll() {
    setTimeout(function() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if (xhr.status === 200) {
            responseObject = JSON.parse(xhr.responseText);
            var newContent = '';
            newContent += responseObject.cmd;
            console.log(newContent);
        }
    }
    xhr.open('GET', 'http://localhost:8194/screen_update/1000', true);
    xhr.send(null);
    setTimeout(poll, 1000);
}, 1000);
})();

The preferred output would be to poll the server each second which should in theory be more than adequate for the response to come through. I only want one request on the go at a time so if I end up with a request taking more than a second it just dumps the request (rather than queuing it) and issues a new request.

The above code polls okay but doesn't complete for 2 seconds so I've obviously got my setTimeout mixed up somewhere. Where do I correct this code?

Answer 1

Define a variable that determines if ajax finished or not. If function is called while ajax hasn't finished yet, you can exit the function and wait for the next call.

var stillWorking = false;

(function poll() {
   if(stillWorking) return false; 
   stillWorking = true;
    setTimeout(function() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if (xhr.readyState == 4) stillWorking = false;
        if (xhr.status === 200) {
            responseObject = JSON.parse(xhr.responseText);
            var newContent = '';
            newContent += responseObject.cmd;
            console.log(newContent);

        }
    }
    xhr.open('GET', 'http://localhost:8194/screen_update/1000', true);
    xhr.send(null);
    setTimeout(poll, 1000);
}, 1000);
})();