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

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 为 0 毫秒）有效地将调用移动到执行堆栈的末尾，因此所有内容都在该调用之前执行。