Javascript 仅在使用 AJAX 的 Internet Explorer 中使用 alert() 时更新 UI答案

【问题标题】：Javascript updates UI only when alert() is used in internet explorer with AJAXJavascript 仅在使用 AJAX 的 Internet Explorer 中使用 alert() 时更新 UI
【发布时间】：2012-08-26 06:07:14
【问题描述】：

我在 Internet Explorer 中遇到问题，它在 Firefox 中运行良好。

我有一个 java 脚本函数，用于更新在 AJAX 函数之前调用的 UI（屏幕内容）。但在使用警告框提示之前，它不会更新 UI。如果没有警告框，它不会在 AJAX 功能之前更新 UI。即使在 AJAX 函数之前调用它也会在 AJAX 函数之后更新 UI

如果我使用以下代码，UpdateUI() 在 AJAX 函数调用之前根本不会更新 UI，它会在 AJAX 函数调用之后更新 UI。我希望它在 AJAX 函数调用之前更新 UI（实际上我在 AJAX 调用之前显示加载栏）

UpdateUI(); // java script function, it just updates inner HTML of a DIV

// AJAX function call here with Async = false

但如果我使用以下代码，UpdateUI() 会在 AJAX 函数调用之前更新 UI，但此方法包含警报提示。我不想使用警报

UpdateUI(); // java script function, it just updates inner HTML of a DIV

alert('hellow');

// AJAX function call here with Async = false

它在 Firefox 中运行良好，但在 Internet Explorer 8 中却不行

【问题讨论】：

如果您正在执行同步 AJAX 调用，则浏览器可能会阻塞，直到它完成。这就是同步 AJAX 调用是个坏主意的原因之一。
但是为什么它在 Firefox 中运行良好
Firefox 是一个不同的浏览器，我猜它的工作方式是 Mozilla 人希望的。
抱歉，不知何故错过了您的请求是同步的。检查this bug report 以获得解释（这与@AshwinPrabhu 给出的答案非常接近）；是的，它是 jQuery 的，但更多的是关于 IE7/8 的行为。

标签： javascript ajax internet-explorer user-interface

【解决方案1】：

当有一个活动的 JS 线程时，浏览器通常不会重排（刷新）UI。它一直等到它从 ts 事件队列中刷新了所有事件，然后再执行重排。可以把它想象成一个单线程循环，浏览器必须在其中执行所有事件。

在某些情况下，重排通常优先级最低，但是您可以通过请求 DOM 元素（如 getComputedStyle 或 offsetX/y 等）的某些属性来强制浏览器重排。基本上，任何需要浏览器布局 UI 来响应的请求都会执行回流。

This 是我以前遇到类似问题时找到的最好的文章。

我可以建议的最简单且万无一失的技巧是将您的代码拆分为两个方法，并在 0mills 之后的超时中调用需要预先回流的方法。这让浏览器在调用方法 2 之前有一些喘息的机会来执行重排。这与您尝试并发现有效的 alert() 技巧完全一样。

【讨论】：

您推荐的任何解决方案，我已经尝试更改许多 DOM 属性但没有成功？
兄弟你能进一步解释一下这个防错技巧吗？这个技巧我其实没懂
好兄弟。假设您要执行两个操作 a() 和 b()，并在 b() 之前进行回流。然后这样做： a(); window.setTimeout(function(){b();},5);如果您需要将状态传递给 b()，则将它们作为参数传递给 function()
我已经完全按照您所说的进行了尝试。但现在我的函数 b();没有执行
那一定是你的代码有bug。 setTimeout 在指定毫秒后执行第一个参数。这太基础了，不可能不行。