Question

I am having a trouble display the cursor wait when I run a lengthy jQuery operation. What I try is

function foo(){
   jQuery('body').css('cursor', 'wait');

   //lengthy jQuery sort/DOM manipulation

   jQuery('body').css('cursor', 'default');
}

what I have observe so far is that, it looks to me like when onclick, invoke this function, it take about 6 seconds (time it takes to operate the sort), then I see all the changes at the end. This make sense since I am still within the same JQuery call, but is there a way to force the cursor change to show to wait, then after the sort operation, and change the cursor back to default once it is done.

NOTE: The length operation is not an ajax call.

Answer 1

This seems good but the problem is that your browser “freezes” when starting to run foo and unfreezes at the end so you can’t notice the cursor change…

Try something similar to what you have but using a timeout…

function foo(){
   jQuery('body').css('cursor', 'wait');
   window.setTimeout(someLengthy,1);
}

function someLength(){
   //lengthy jQuery sort/DOM manipulation
   jQuery('body').css('cursor', 'default');
}