Question

下面的代码段中的Div不应该在点击后变为绿色，但它在IE 11和Edge中会显示。

让我们来看看以下情况：有一个黑色的1> RxData = "Hello World!", DevAddr = "Earth", 1> Data = base64:encode(RxData), Devaddr = base64:encode(DevAddr), 1> TextAddr="Device address", TextPayload="Payload", 1> Json=["{'", TextAddr, "': '", Devaddr, "', '", TextPayload, "': '", Data, "'}"]. ["{'","Device address","': '",<<"RWFydGg=">>,"', '", "Payload","': '",<<"SGVsbG8gV29ybGQh">>,"'}"] 2> file:write_file("/tmp/foo.txt", Json). ok 3> file:read_file("/tmp/foo.txt"). {ok,<<"{'Device address': 'RWFydGg=', 'Payload': 'SGVsbG8gV29ybGQh'}">>} 单击它时，我们会调用div并立即将颜色更改为绿色在requestAnimationFrame回弹中，我们将颜色更改为红色。

为了提高可见度，我在requestAnimationFrame中添加了一个循环，这会产生3秒的延迟。我还添加了一个CSS动画来显示滞后的位置。

我希望以下行为（并在Chrome和Firefox中看到它）：

有一个黑色requestAnimationFrame
div
颜色正式变为绿色，但未呈现
没有渲染click的回调称为
浏览器在屏幕上黑色 requestAnimationFrame滞后3秒
div＆＃39;颜色变为红色
渲染发生，红色 div显示

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

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

我无法在requestAnimationFrame之前阻止更改，因为在我的实际代码中它们是由CSS动画引起的。即使在对requestAnimationFrame进行2次递归调用的情况下也会出现此问题。

https://jsfiddle.net/8Ljn14ee/2/

＆＃13;

requestAnimationFrame

＆＃13;

var div = document.querySelector('div');

div.addEventListener('click', function () {
  requestAnimationFrame(function () {
    var t = new Date;
    t.setSeconds(t.getSeconds() + 3);
    while (new Date < t);
    div.style.background = 'red';
  });

  div.style.background = 'green';
});

＆＃13;

div {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: black;
  animation: w-100-200 3s linear infinite;
}

@keyframes w-100-200 {
    0% { width: 200px; }
   50% { width: 400px; }
  100% { width: 200px; }
}

＆＃13;

PS：Same question in Russian.

Answer 1

似乎在Edge上正在考虑该问题

我认为这是因为IE不能足够快地执行requestAnimationFrame或延迟了一段时间，所以它执行div.style.background ='green';。而其他浏览器则没有。

我在IE中使用requestAnimationFrame遇到类似的问题，我认为这是相同的问题，请检查小提琴，即单击圆圈，当其他浏览器不这样做时，它会变为绿色。

https://jsfiddle.net/8Ljn14ee/13/

var div = document.querySelector('div');

div.addEventListener('click', function () {
  div.style.background = 'green';
  requestAnimationFrame(function () {
    div.style.background = 'red';
  });
});

div {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: black;
  animation: w-100-200 3s linear infinite;
}

@keyframes w-100-200 {
    0% { width: 200px; }
   50% { width: 400px; }
  100% { width: 200px; }
}

<div></div>

我使用该解决方案来计算带有显示的元素的宽度或高度：然后在requestAnimationFrame中重新隐藏元素，只有在IE上，您才能看到元素可见的时刻。

IE在requestAnimationFrame之前执行渲染

1 个答案: