只有当 alert() 在带有 AJAX 的 Internet Explorer 中使用时，Javascript 才会更新 UI

Question

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

我有一个更新 UI(屏幕内容)的 java 脚本函数，它在 AJAX 函数之前被调用。但在使用警告框提示之前，它不会更新 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 中运行不正常

Answer 1

当存在事件的 JS 线程时，浏览器通常不会回流(刷新)UI。在执行回流之前，它会一直等到从 ts 事件队列中清除所有事件。将其想象成一个单线程循环，浏览器必须在其中执行其所有事件。

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

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

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