在JavaScript-clientLeft hack或requestAnimationFrame中触发重新播放哪个更好？

有时，通过JavaScript应用样式时，这些更改不可见，因为它们发生在一个动画帧中

例如：

请记住，这个例子只是为了演示这个问题，而不是一个真实的例子

在上面的示例中，颜色将立即更改为蓝色，而红色永远不可见。有些人使用setTimeout解决此问题：

$('.foo').style('color', 'red');

setTimeout(function () {
  $('.foo').style('color', 'blue');
}, 1);

由于这不是一个好的实践，我想知道在下一帧中强制绘制样式的更改哪个更好

选项1：clientLeft黑客

请求DOM元素的clientLeft值将导致浏览器中的重新显示

$('.foo').style('color', 'red');
var bar = $('.foo')[0].clientLeft; // hack to force relayout
$('.foo').style('color', 'blue');

赞成：只适用于不同的浏览器 犯人：这是一个黑客 选项2:requestAnimationFrame

赞成者：没有黑客 反对：没有低于9的IE版本？

---

我发现这两种解决方案都不是完美的，因为IE9及更老版本不支持requestAnimationFrame，而clientLeft黑客。。嗯，这是一个黑客

所以，我曾经使用过，现在我拥有两个世界中最好的：

我可以用requestAnimationFrame替换大多数setTimeout调用 支持它的较新浏览器以本机方式提供requestAnimationFrame 较旧的浏览器会得到polyfill

---

对我来说是完美的解决方案。

我想这是你想如何使用它的矛盾所在。如果您希望它是一个响应，那么左键单击它是“其他”，然后使用另一个。根据MDN，IE10支持requestAnimationFrame-，微软的网站也说了同样的话，请注意IE10徽章。另外，关于最初的问题，当所需的行为可用并内置到浏览器中时，为什么要使用clientLeft来破解这个问题？最后，如果Microsoft不再支持IE9，除非您运行Vista，显然Microsoft不再支持，所以我猜这意味着他们不支持IE9，我认为你不再支持它是安全的。事实上，他们也不支持IE10。“我们不再回到IE6/7黑暗时代了，现代化一点也没关系。”亚当感谢你指出IE。我在问题中改变了这一点。关于你的黑客问题：它也适用于旧的IE版本，而英国皇家空军则不适用。应该支持哪些浏览器的决定不在我的手中。我喜欢人们不给出理由就投反对票。IE>=10支持requestAnimationFrame。@Adam你说得对，谢谢你指出。我会在我的帖子里改变这一点。

$('.foo').style('color', 'red');
var bar = $('.foo')[0].clientLeft; // hack to force relayout
$('.foo').style('color', 'blue');

$('.foo').style('color', 'red');

requestAnimationFrame(function () {
  $('.foo').style('color', 'blue');
});