javascript确认阻止屏幕更新在Chrome浏览器

javascript confirm prevents screen update in Chrome

本文关键字：Chrome 浏览器 更新 屏幕 确认 javascript      更新时间：2023-09-26

我有一个javascript函数做两件事:

  • 更改表格行背景色
  • 发出confirm()弹出窗口，要求用户确认删除(高亮显示的)行

它在Firefox上运行良好。在Chrome上，弹出窗口出现。但是背景直到我取消confirm()框后才改变颜色，这有点违背了让用户知道要删除哪一行的目的。

我确信这与javascript的异步特性有关。但我得知道怎么绕过它。现在，这两行代码是:

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

我需要做些什么来确保行是黄色的，而弹出窗口显示，不等待更改为黄色，直到弹出窗口消失后?我可以尝试延迟等等。但这是抓救命稻草。有"正确"的方法来处理这个问题吗?

同样，在Firefox....上运行良好Chrome浏览器上没有。没有尝试过其他浏览器。

谢谢。杰瑞

我可以尝试延迟等。但这是抓救命稻草。

没有。

什么时候渲染完全取决于浏览器。每个浏览器引擎都有自己的优化。解决这个问题的唯一方法是短暂的延迟。

一种可靠的延迟形式是requestAnimationFrame()。我认为您可以合理地确定，一旦触发此选项，浏览器将重新绘制之前的任何内容。没有测试过，但是试试这样做:

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

还要注意，您无法控制确认框出现的位置。它可能在你的内容上面。它是由浏览器决定如何呈现，是传统的工具样式窗口，还是全屏模式。

我也有同样的问题。当我在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对JavaScript对话框的政策

相关文章：