Question

In my web application, what the user does on the page have to be sent my database, so I have the latest changes saved.

I just call the function with the request here when the user close the page:

window.onbeforeunload = sendData;

But where the problems come up is when I send data every 10 second. I do send my requests sync and not async (or it would not be sent onbeforeunload). The problem is that this adds delays to the user interface when the data is sent every 10 second.

setInterval(sendData,10000);

This is what’s getting called:

function sendData(){
     var xhr = new XMLHttpRequest();
     var localData = datatodatabase;
     xhr.open("POST", "handler.php", false);
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhr.send("pack="+datatodatabase);
}

Is it possible to add this inside a Web Worker to make the synchronized requests stop delaying what everything else is going on?

(As I said: I have to use synchronized because of onbeforeunload)

Answer 1

Why don’t you make it asynchronous every 10 seconds, but onbeforeunload make it synchronous? Like this:

setInterval(function () {
    sendData(true);
}, 10000);

window.onbeforeunload = function () {
    sendData(false);
}

function sendData(async) {
    // Make the ajax call the specific way based on whether *async* is *true* or *false*

    // Probably eventually:
    xhr.open("POST", "handler.php", async);
}