Javascript IE在requestAnimationFrame之前执行渲染

下面代码段中的Div在单击后不应变为绿色，但在IE 11和Edge中会变为绿色

---

让我们看看下面的情况：有一个黑色的

div

单击时，我们调用

requestAnimationFrame

，并立即将颜色更改为绿色。
在

requestAnimationFrame

collback中，我们将颜色更改为红色

为了获得更多的可视性，我在

requestAnimationFrame

中添加了一个循环，它会产生3秒的延迟。此外，我还添加了一个CSS动画来显示滞后的位置

我期望以下行为（在Chrome和Firefox中可以看到）：

有一个黑色的

div

单击

颜色正式更改为绿色，但未渲染

在不渲染的情况下，调用

requestAnimationFrame

的回调

浏览器延迟3秒，屏幕上显示黑色

div

div

的颜色变为红色

渲染发生并显示红色

div

但是，步骤5中的IE11和Edge显示为绿色div。我认为这种行为是不正确的，因为浏览器必须推迟重新渲染，直到执行

requestAnimationFrame

处理程序

如何在渲染之前强制IE/Edge调用处理程序

我无法阻止

requestAnimationFrame

之前的更改，因为在我的实际代码中，它们是由CSS动画引起的。即使在对

requestAnimationFrame

进行两次递归调用时，也会出现此问题

var div=document.querySelector（'div'）；
div.addEventListener（'click'，函数（）{
requestAnimationFrame（函数（）{
var t=新日期；
t、 设置秒（t.getSeconds（）+3）；
而（新日期
div{
高度：200px；
宽度：200px；
边界半径：50%；
背景：黑色；
动画：w-100-200 3s线性无限；
}
@关键帧w-100-200{
0%{宽度：200px；}
50%{宽度：400px；}
100%{宽度：200px；}
}
这个问题似乎正在考虑中

我认为这是因为IE执行requestAnimationFrame的速度不够快，或者有点延迟，所以它执行div.style.background='green'；而其他浏览器则不然

我对IE的requestAnimationFrame也有类似的问题，我认为这是同一个问题，用IE检查小提琴，点击圆圈，你会看到它变绿了，而其他浏览器却没有这样做



var div=document.querySelector（'div'）；
div.addEventListener（'click'，函数（）{
div.style.background='绿色'；
requestAnimationFrame（函数（）{
div.style.background='red'；
});
});
div{
高度：200px；
宽度：200px；
边界半径：50%；
背景：黑色；
动画：w-100-200 3s线性无限；
}
@关键帧w-100-200{
0%{宽度：200px；}
50%{宽度：400px；}
100%{宽度：200px；}
}
不确定它是否相关，但您已经得到：
var t=new Date和
while（新日期应该是：
var t=new Date（）和
while（新日期（）@ScottMarcus，不，不应该。那是一样的。顺便说一句，你可以看到，它确实有效。你能提供一些文档吗。我看不到列出的语法。如果不添加括号，可能会得到正确的日期/时间，但当您尝试调用返回对象上的方法（如
.setSeconds（）
）时，这将是一个问题，因为这是一个实例方法，如果没有括号，则会得到一个值，而不是一个实例，因为您没有将
Date
作为构造函数调用。@ScottMarcus说
new constructor[（[arguments]）]
-正如您所见，如果没有参数，大括号可以省略。@ScottMarcus，只要检查您是否不信任：不管括号是什么，这部分都是以同样的方式工作的。不，如果我不使用
new
调用它，我将得到值（字符串）。使用
new
它是一个
Date
对象。