Question

I’m having an issue with some asynchronous JavaScript code that fetches values from a database using ajax.

Essentially, what I’d like to do is refresh a page once a list has been populated. For that purpose, I tried inserting the following code into the function that populates the list:

var timer1;
timer1 = setTimeout([refresh function], 1000);

As you might imagine, this works fine when the list population takes less than 1 second, but causes issues when it takes longer. So I had the idea of inserting this code into the function called on the success of each ajax call:

clearTimeout(timer1);
timer1 = setTimeout([refresh function], 1000);

So in theory, every time a list element is fetched the timer should reset, meaning that the refresh function should only ever be called 1 second after the final list element is successfully retrieved. However, in execution all that happens is that timer1 is reset once, the first time the second block of code is reached.

Can anybody see what the problem might be? Or if there’s a better way of doing this? Thanks.

==========

EDIT: To clear up how my ajax calls work: one of the issues with the code’s structure is that the ajax calls are actually nested; the callback method of the original ajax call is itself another ajax call, whose callback method contains a database transaction (incorrect – see below). In addition, I have two such methods running simultaneously. What I need is a way to ensure that ALL calls at all levels have completed before refreshing the page. This is why I thought that giving both methods one timer, and resetting it every time one of the callback methods was called, would keep pushing its execution back until all threads were complete.

Quite honestly, the code is very involved– around 140 lines including auxiliary methods– and I don’t think that posting it here is feasible. Sorry– if no one can help without code, then perhaps I’ll bite the bullet and try copying it here in a format that makes some kind of sense.

==========

EDIT2: Here’s a general workflow of what the methods are trying to do. The function is a ‘synchronisation’ function, one that both sends data to and retrieves data from the server.

• I. Function is called which retrieves items from the local database
• i. Every time an item is fetched, it is sent to the server (ajax)

• a. When the ajax calls back, the item is updated locally to reflect
  its success/failure

• II. A (separate) list of items is retrieved from the local database

• i. Every time an item is fetched, an item matching that item’s ID is fetched from the server (ajax)
• a. On successful fetch from server, the items are compared
• b. If the server-side item is more recent, the local item is updated

So the places I inserted the second code block above are in the ‘i.’ sections of each method, in other words, where the ajax should be calling back (repeatedly). I realize that I was in error in my comments above; there is actually never a nested ajax call, but rather a database transaction inside an ajax call inside a database transaction.

Answer 1

You’re doing pretty well so far. The trick you want to use is to chain your events together, something like this:

function refresh()
{
    invokeMyAjaxCall(param1, param2, param3, onSuccessCallback, onFailureCallback);
}

function onSuccessCallback()
{
    // Update my objects here

    // Once all the objects have been updated, trigger another ajax call
    setTimeout(refresh, 1000);
}

function onFailureCallback()
{
    // Notify the user that something failed

    // Once you've dealt with the failures, trigger another call in 1 sec
    setTimeout(refresh, 1000);
}

Now, the difficulty with this is: what happens if a call fails? Ideally, it sounds like you want to ensure that you are continually updating information from the server, and even if a temporary failure occurs you want to keep going.

I’ve assumed here that your AJAX library permits you to do a failure callback. However, I’ve seen some cases when libraries hang without either failing or succeeding. If necessary, you may need to use a separate set of logic to determine if the connection with the server has been interrupted and restart your callback sequence.

EDIT: I suspect that the problem you’ve got is a result of queueing the next call before the first call is done. Basically, you’re setting up a race condition: can the first call finish before the next call is triggered? It may work most times, or it may work once, or it may work nearly all the time; but unless the setTimeout() is the very last statement in your “response-processing” code, this kind of race condition will always be a potential problem.