Force change of cursor immediately

[Tom de Neef]

The objective:
1. change cursor to hourglass
2. do extensive calculation (a search in strings)
3. upon completion, change cursor to default

The code I use
document.body.style.cursor = "wait"
for (k=0;k<someCount;k++) { do a lot of searching }
// document.body.style.cursor = "auto"

I commented the last line out to see what happens. The cursor changes to the
hourglass upon completion of the for statement. It is as if it had to wait
for idle time. I have experimented with setTimeout() but to no avail.

Is there a way to force the cursor change to take effect immediately?
Kind regards,
Tom

 

[jhurstus]

The objective:
  1. change cursor to hourglass
  2. do extensive calculation (a search in strings)
  3. upon completion, change cursor to default

The code I use
  document.body.style.cursor = "wait"
  for (k=0;k<someCount;k++) { do a lot of searching }
//  document.body.style.cursor = "auto"

I commented the last line out to see what happens. The cursor changes to the
hourglass upon completion of the for statement. It is as if it had to wait
for idle time. I have experimented with setTimeout() but to no avail.

Is there a way to force the cursor change to take effect immediately?
Kind regards,
Tom

Tom,
I doubt it's possible to implement a robust solution that solves your
problem. When you set the cursor style to "wait," you can be
guaranteed that this will be reflected immediately in the DOM, however
the browser then has to relay this information to the system which
will actually display the cursor. I don't think there is any way to
know when the system will be notified about the cursor change.

If you're developing this page for a homogenous user base, you could
use setTimeout to delay the searching for the approximate time it
takes for the cursor change to register. On my machine it took about
200ms.

-Joey

 

[Anthony Levensalor]

The objective:
1. change cursor to hourglass
2. do extensive calculation (a search in strings)
3. upon completion, change cursor to default

The code I use
document.body.style.cursor = "wait"
for (k=0;k<someCount;k++) { do a lot of searching }
// document.body.style.cursor = "auto"

I commented the last line out to see what happens. The cursor changes to the
hourglass upon completion of the for statement. It is as if it had to wait
for idle time. I have experimented with setTimeout() but to no avail.

Is there a way to force the cursor change to take effect immediately?

In your case, change the cursor right before the loop (as you are
doing), then set a timout of 100ms before you run the searches to make
sure it had time to change.

The only way I can think to do it with even the tiniest bit of
reliability would be to not execute the loop until the cursor had
changed, which is a little unnatural, but it would work.

1. change cursor
2. set interval to check document.body.style.cursor
3. once it comes back to you the way you want, fire the search code and
clear the interval timer

~A!

 

[Tom de Neef]

Anthony Levensalor said the following on 1/10/2008 3:02 PM:

Change cursor.
Exit current execution context.
Cursor gets changed.
Do the search.
Change cursor back.

It is an age old problem with the display not getting updated until the
current execution context exits. Using setTimeout causes that exit to
happen and the display gets updated.

And is that (calling setTimeout) the prefered way ?
Tom

 

[Anthony Levensalor]

And is that (calling setTimeout) the prefered way ?
Tom

I would, yes. Your choices are setInterval and setTimeout, but
setInterval is for repetition, setTimeout being the one at a time call.

var t = setTimeout(checkCursor, 100)

function checkCursor() {
if (document.body.cursor.style == "wait") {
// fire search code
clearTimeout(t)
} else {
t = setTimeout(checkCursor, 100);
}
}

That's an untested sample.

~A!