javascript - 为什么Android上的javascript执行顺序不一致

Question

我正在开发一个单页移动网站，该网站会在页面导航之间显示一个加载小部件。在旧的 Android 手机上(我正在 Galaxy S 上进行测试)，绘制加载图标会被推迟，直到大部分其他处理完成为止。这当然在很大程度上违背了加载图标的目的。

$("button").click(function() {
    $(".cover").show();
    $(window).scrollTop(0);
    for(var i = 0; i < 1000; i++) {
      console.log($(".body").css("width"));
    }
    setTimeout(function() {
        $(".body").toggleClass("toggle");
        $(".cover").hide();
    }, 1000);
});

此示例代码准确地演示了我的网站上发生的功能。有一个命令来显示加载小部件，然后是一些相对繁重的处理(当然在实际页面上，它是各种不同的东西，但这个演示和我的页面的行为方式相同)。当您按下 Galaxy S 上的按钮时，会进行一系列处理，然后会出现加载小部件并等待一秒超时。

为什么它不首先显示加载小部件显示以及如何强制它显示？

这是一个带有演示的 jsbin，以便您可以在手机上看到它:JSBin

Answer 1

如果让事件循环完成，浏览器就会绘制。你可以这样做:

$("button").click(function() {
    $(".cover").show();
    $(window).scrollTop(0);
    setTimeout(function() {
        for(var i = 0; i < 1000; i++) {
          console.log($(".body").css("width"));
        }
        setTimeout(function() {
            $(".body").toggleClass("toggle");
            $(".cover").hide();
        }, 1000);
    }, 1);
});

还有其他方法可以强制特定浏览器重新绘制，但您必须测试哪些方法适用于您的特定情况。以下是有关其他方法的一些其他引用:

Force DOM redraw/refresh on Chrome/Mac

How can I force WebKit to redraw/repaint to propagate style changes?

Force repaint of element with javascript

Force redraw on an element with jQuery

<小时/>

至于为什么这在每个浏览器中都不相同，那是因为除了浏览器返回事件循环之外，浏览器何时重新绘制挂起的更改没有通用标准。因此，如果浏览器在 Javascript 仍在运行时(当前 JS 执行线程完成之前)进行绘制，或者是否会等到 JS 完成，则取决于给定的浏览器实现。首先，解决方法利用观察到的行为来创建解决方法，而不是触发记录的、标准定义的行为。