jQuery timing - wanting to add something akin to DoEvents() in a method

Question

I have a table of data that contains about 260 rows. Each of these rows is identified by an attribute such as parentHeaderName. When the header of that table is clicked, I have some jQuery in place that briefly changes the header to an ajaxload.gif image, like this

$('#Header').html('<img src="images/ajaxload.gif"');

and then I toggle all 260 rows by calling

$([parentHeaderName=something]).toggle();

Unfortunately, I am not able to get the part of my code that changes the header to the ajaxload.gif to run properly. It is as though both that statement, and the toggle statement, are running all at the same time. Meaning, that the user never sees the ajaxload.gif. The only way I can get the image to show is if I put an alert('...') message between the two statements. Obviously, this is not desired as a solution. I've tried using delay() and setTimeout to no avail. I guess what I need is some sort of DoEvents equivalent in jQuery or javascript that would let the image show prior to the toggle execution.

Any ideas?

Thanks, Chris

UPDATE: Thanks for the feedback folks. Here's the actual code:

$('.sixdegreestypeheader').click(function() {
    var headerName = $(this).attr("headername");
    var jq = "[headername$=" + headerName + "]";
    var jq2 = "[parentheadername$=" + headerName + "]";

    var originalTextValue = $(jq).text();
    var originalHTMLValue = $(jq).html();

    if (originalHTMLValue.indexOf("collapse") == -1) {
        $(jq).html('<img src="images/collapse.gif" /> ' + originalTextValue);
    }
    else {
        $(jq).html('<img src="images/expand.gif" /> ' + originalTextValue);
    }

    // alert('break here to act as a DoEvents.') // this forces the image change... but I don't want to have to use an alert to force this
    $(jq2).toggle();

    return false;
});

(This code actually changes the header to expand.gif or collapse.gif, rather than ajaxload.gif.)

I did try the delay suggestion

$(jq2).delay(500).toggle();

but it did not help any. When the number of rows that need to get toggled is small - say, up to about 20 - there is no problem. But in some cases, I need to hide a bunch (e.g. 260), and it is as though the browser needs several seconds to chug through the DOM to do all of its hiding of things. That's why I was originally hoping to use the ajaxload.gif image.

Thanks, Chris

Answer 1

Thanks for the help everyone. As it turns out, the problem was more with the toggle() statement then anything else. .toggle()ing so many records is what caused the browser to hang for a bit, regardless of what I did in terms of .delay(), .when(), etc. I ended up doing a straight .hide() and .show(), and these changes sped things up to expected behavior. In order to determine the current visibilty (and thus to know whether I should .hide() or .show()), I checked the visibility of the first matched element, e.g. $(criteria:first:visible) and proceeded appropriately.

Thanks again, and best regards.

-- Chris