javascript 确认阻止 Chrome 中的屏幕更新答案

【问题标题】：javascript confirm prevents screen update in Chromejavascript 确认阻止 Chrome 中的屏幕更新
【发布时间】：2016-09-19 22:51:16
【问题描述】：

我有一个 javascript 函数可以做两件事：

更改表格行背景颜色
发出一个确认（）弹出窗口，要求用户确认删除（突出显示的）行

它在 Firefox 上运行良好。在 Chrome 上，会出现弹出窗口。但是在我关闭 confirm() 框之前背景不会改变颜色，这有点违背让用户知道要删除哪一行的目标。

我确信这与 javascript 的异步特性有关。但我需要知道如何绕过它。现在，这两行代码是：

  $(icon).closest( "tr" ).css( "background-color", "yellow" );
  if ( confirm( message )) {.......}

我需要做些什么来确保在显示弹出窗口时该行是黄色的，并且在弹出窗口消失后才变为黄色？我可以尝试延迟等。但那是在抓住稻草。有没有“正确”的方法来处理这个问题？

再一次，在 Firefox 上运行良好....在 Chrome 上 nada。其他浏览器没试过。

谢谢。杰瑞

【问题讨论】：

标签： javascript css asynchronous confirm

【解决方案1】：

我可以尝试延迟，等等。但那是在抓住稻草。

不是。

何时渲染完全取决于浏览器。每个浏览器引擎都有自己的优化。处理此问题的唯一方法是短暂延迟。

一种可靠的延迟形式是requestAnimationFrame()。我认为您可以合理地确定，一旦触发，浏览器将重新绘制之前的任何内容。未经测试，但请尝试以下方法：

$(icon).closest('tr').css('background-color', 'yellow');
requestAnimationFrame(function () {
  if (confirm(message)) {

  }
});

另请注意，您无法控制确认框的显示位置。它可能位于您的内容之上。由浏览器决定如何呈现它，无论是传统的工具样式窗口，还是全屏模式。

【讨论】：

感谢您的快速回复。不幸的是，requestAnimationFrame 没有任何效果。但是，我将其替换为： SetTimout( function () { if (confirm(message)) {...... } }, 100);它奏效了。再次感谢您为我指明正确的方向。
@JerryMalcolm 尝试使用requestAnimationFrame() 两次。我怀疑它会比正常延迟更可靠。
requestAnimationFrame 在重绘之前被触发。这不是延迟，这是挂钩预处理。
@AnrDaemon 是的，这就是为什么我建议使用它两次。
使用它两次，您只需将两个钩子添加到同一个重绘事件。您必须在第一个中使用下一个，例如在 swizec.com/blog/… 中，但话又说回来，这在预期的脚本逻辑中并不总是可能的。

【解决方案2】：

我有同样的问题。当我在 Chrome 中显示确认对话框时，我之前的 DOM 更改还不可见。用户需要查看这些 DOM 更改才能回复确认对话框。

为了解决这个问题，我使用了如下延迟。

function outerFunction() {
  console.log("do stuff");

  setTimeout(innerFunction, 0);
  return;

  function innerFunction() {
    if (confirm("really?")) {
      console.log("do more stuff");
    }
  }
}

请注意，通过使用嵌套函数，您无需传递任何参数。

另请注意，Chromium 团队强烈建议您不要使用 JavaScript 对话框——请参阅 Chromium policy on JavaScript dialogs

【讨论】：