javascript - 除了 setTimeout 之外的任何方式来强制浏览器重绘？

Question

我正在使用（并贡献于）一个 jQuery 表格排序插件，该插件包含一个在表格排序之前进行额外处理的事件。最初浏览器在排序之前没有进行重绘，所以我在插件代码中添加了一个 setTimeout 调用来强制重绘。所以现在的代码是这样的：

$table.trigger("beforetablesort", {column: th_index, direction: sort_dir});

setTimeout(function() {
  // do the hard work
}, 10);

我的beforetablesort回调是这样的：

table.bind('beforetablesort', function (event, data) {
  $("table").css({opacity: 0.5});
});

以上所有工作正常。但是，如果我使用addClass而不是内联样式，则该类的更改在表完全排序之前不会显示：

table.bind('beforetablesort', function (event, data) {
  $("table").addClass('disabled');
});

如果我将超时时间增加到 500 毫秒以上，则不透明度确实会发生变化。与内联样式更改相比，类更改似乎需要更长的时间才能可见。但是当浏览器准备好重新绘制时，它已经在进行表格排序了。

有没有办法提前强制重绘？还是等到重新绘制表格排序代码才能运行？任意增加超时时间似乎不是一个好的解决方案，因为它会强制所有表至少花费半秒时间进行排序。（如果有帮助，插件的完整代码在 Github 上。）

score 0 · Accepted Answer

Jan Dvorak 的上述评论有效。

读取一些计算属性将等待重排。希望它也能确保重新粉刷。

我刚刚添加了该行$table.css("display");，浏览器在排序开始之前重新绘制了表格。

score 0 · Accepted Answer

也许你已经考虑过使用 $.deferred() http://api.jquery.com/jQuery.Deferred/。当延迟对象被解析时，超时中的代码应该进入回调处理程序

2 回答 2