0

I have found that events like .click and .change, if they result in some processing that takes significant time (like a second or two) actually delay the screen update, so the user does not see e.g. the radio button select move until after some time. This is of course a big no-no in terms of user experience. The button should change at once, and the cursor indicate if there is a wait going on.

Example: http://jsfiddle.net/needlethread/uFjZf/1/

$('[name="myradio"]').change(function() {
  delay();                              // one second of code execution
  $("#aaa").html("myradio changed");    // happens same time as radio moves 
});

What is the best way to ensure that the button visibly changes as soon as the user clicks on it? I tried the .click event, same thing.

Dan
  • 1,249
  • 2
  • 16
  • 31

1 Answers1

0

If you're using Ajax to connect to a server, there's no problem since this is asynchronous.

Otherwise if you're just doing heavy client-side stuff, you could employ a trick:

$('[name="myradio"]').change(function() {
  $("#aaa").html("myradio changed");    // happens same time as radio moves 
  setTimeout(delay, 0);
});

What this does (setTimeout with 0 milliseconds) is effectively move the call to the end of the execution stack, so everything gets executed before that call.

Kenneth
  • 28,294
  • 6
  • 61
  • 84
  • Sounds convincing - but does not actually work! In fact, I can see that even the "myradio changed" does not update display until the delay call has finished. See http://jsfiddle.net/needlethread/b2sF3/ Both Firefox and Chrome behave this way. – Dan Apr 20 '13 at 15:36
  • That's because you haven't copied my example correctly. You have put parenthesis after delay => `setTimeout(delay(),0);` This actually invokes the function immediately. You should just pass the pointer like this: `setTimeout(delay,0); ` – Kenneth Apr 20 '13 at 15:46
  • You are right of course... but it seems to work fast only sometimes (about 10% of the time). I'm trying your fiddle in Chrome and Firefox. It is always instant if I set the delay loop to 1 iteration, so it's not a PC issue. Weird. – Dan Apr 20 '13 at 19:09