Change cursor type for an html document from javascript

Let’s say I have a javascript method that takes a little to long to finish to go without any user feedback at all. In my case it’s sorting the rows in a table element (all in the DOM; only takes too long if there are a lot of rows), but it might do anything. I want to show the “progress” cursor while it runs. Here is what I have currently, but I’ve tried several other things as well:

// SORT   
document.body.style.cursor = "progress";
MyLongRunningMethod(); //blocks for 10-15 seconds before returning
document.body.style.cursor = "auto";

Unfortunately, nothing happens. MyLongRunningMethod() does it’s thing correctly, but the cursor never changes. My thought is that the browser needs to wait for the method to return to be able to handle the cursor change message generated by the windowing environment, but that may be way off and even if it’s true I don’t know how to fix it.

Any other ideas?

[edit]: I decided all the back-story I had up wasn’t really necessary. If you really want to read it check the revision history.

Final Results

I ended up using RoBorg’s solution. It doesn’t mess up the code as much as I was originally thinking, because I can keep the function declared right there- it’s just like adding an inline scope block.

Interestingly, on Firefox I discovered that this means I don’t need to change the cursor at all. I found that after I added the setTimeout call I was sometimes seeing a wait cursor show up before the progress cursor was set, so I commented out my cursor code. It turns out that something in using setTimeout to push this out of the click event handler itself allows FireFox to figure out on it’s own that the cursor should change. Unfortunately, IE is not that smart so I did put the cursor code back.

This lends credence to my belief that a cursor change is the appropriate action here — given the opportunity it’s what the browser will do anyway. I really don’t want to have to add and remove new items (like a busy image of some type) into the DOM for a page that I know very little about. The script should match no matter what visual design the page uses.

Finally, Chrome makes the whole thing irrelevant. Using the same data, Chrome does in less than 5 seconds what took IE and Firefox 10 to 15 seconds to accomplish. So their javascript engine really is faster. I can’t wait for the Firefox 3.1 engine. Unfortunately people here are still mostly using IE6.

Answer

Is using a timer out of the question?

document.body.style.cursor = "progress";

setTimeout(function()
{
    SortTable(cell.cellIndex, dir, sortType);
    document.body.style.cursor = "auto";
}, 10);

Advertisement

Answer