Question

I think this fairly basic but I can’t seem to find one on-line. This can be in JavaScript or jquery.

I need to create a timer for about a 1-2 seconds.
Meanwhile another function is using ajax to pass data to a server side php file. When the response text gets back it displays it on the page.

At the moment I have the ajax function running and the time taken for the function to complete is about 0.1 seconds. But this makes the page look really jumpy as the content changes css styles while the ajax is waiting for a response and then back to the original on return (hope that makes sense).

Anyway to combat this I would like the function to check if the timer has ended before displaying the response text.

The only way I can get it at the moment is by creating a interval timer for a second and running the ajax function when that completes, but this is not ideal as the viewer MUST wait the extra second or 2 even if the request to the server takes over that time to complete.

Hope All Of That Makes Sense & Thanks Very Much For Your Time.

Chris

Answer 1

You’re better off attaching your function as a “success” handler to your AJAX call rather than using a fixed timer. How you attach it depends on which library, if any:

jQuery 1.4 style (still works in 1.5)

$.ajax({
    // your AJAX options

    success: yourFunc
});

jQuery 1.5 style

$.ajax({
    // your AJAX options
}).done(yourFunc);

DOM style

// after creating your XHR

xhr.onreadystatechange = function() {
    if (this.readyState === 4) { // 4 means the request has completed
        if (this.status !== 200) { // 200 is success, so anything else...
            // log or report error
            return;
        }

        // call your other function, which uses the AJAX data
        yourFunc(this.responseText);
    }
};