如何确保HTML表单元素在执行javascript事件之前可见地更新

Question

我发现像。click和。change这样的事件，如果它们导致一些需要花费大量时间(如一秒钟或两秒钟)的处理，实际上会延迟屏幕更新，所以用户直到一段时间后才看到例如单选按钮选择移动。这当然是用户体验方面的大忌。按钮应立即改变，并且光标指示是否正在等待。

示例: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 
});

确保按钮在用户点击时发生明显变化的最佳方法是什么?我尝试了。click事件，同样的事情

Answer 1

如果使用Ajax连接到服务器，则没有问题，因为这是异步的。

否则，如果你只是在做繁重的客户端工作，你可以使用一个技巧:

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

这所做的(setTimeout with 0毫秒)是有效地将调用移动到执行堆栈的末尾，因此所有内容都在调用之前执行。