Question

I have a strange need. I would like to do the following in javascript:

1. when a function is called I want
   to change the color of a DIV and
   then 1/2 second later I would like
   to change it back
2. at the same time as (1) I would
   like to make an Ajax call. The call
   typically takes one second

In other words I would like step 1 and step 2 to start at the same time.

My knowledge of javascript is pretty basic. Is this kind of thing possible? How about if I use jQuery, would that make it easier?

Answer 1

You can use jQuery and its function queue, to delay an action.

I forked wdm’s version on jsFiddle, to change it to queue style, instead of setTimeout. In my own belief, this is a much cleaner and better way to achieve what you are looking for.

Here is the forked Demo

Here is the JavaScript code:

$('#change').click(function(e) {
    e.preventDefault();

    $('#a')
        .css('background-color', 'blue')
        .delay(500)
        .queue(function(next){
            $(this).css('background-color', 'red');
            next();
        });

    $.ajax({}); // do the ajax call here
});