requestAnimationFrame代码执行时间

Question

在requestAnimationFrame上的Mozilla文档声明我传递给requestAnimationFrame的回调将在下一次重绘之前运行。

我正在试图找出如何与此同步代码。

具体来说，我想：

1. 将CSS类应用于元素
2. 等待该类完全处理并应用（执行任何所需的布局/渲染/绘画）
3. 将另一个CSS类应用于同一个元素

我希望上述内容能够尽快执行。

我可以使用requestAnimationFrame来实现这个目标吗？

似乎如果我用requestAnimationFrame包装＃1，它可以将＃1和＃3转换为单次执行，然后应用paint。与RAF中的包装＃2相同。我是否需要在＃1的回调中链＃3？

Answer 1

我在这里找到了一个可能的解决方案，虽然有点不稳定，但仍然有效。

如果我在requestAnimationFrame回调中将所有这些链接在一起，那么它按预期工作：

window.requestAnimationFrame(function()
  {
    // apply class 1
    window.requestAnimationFrame(function()
    {
      // apply class 2
    });
  });

我不是特别喜欢这个解决方案，但它是一个解决方案。还有什么更好的吗？