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完成之后，它取决于给定的浏览器实现。最重要的解决方法是利用观察到的行为来创建解决方案，而不是触发记录的，标准定义的行为。

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

1 个答案: