Question

我正在运行一个应用程序，它在从服务器获取数据时显示“加载轮”。

一切都在Firefox中正常运行，而不是在Chrome中。

在chrome中，我只能在应用breakpoint后才能看到加载轮。

请求需要3-4秒才能完成。没有断点，我看不到装载轮。

我有这两个用于jquery的包装器

hideLoadingImage = function() {
    $("#loading").hide();
  };

  showLoadingImage = function() {
    $("#loading").show();
  };

所以我称之为 -

myfunc: function(event){
showLoadingImage();
         TASK TO PERFORM --->
         new_model = new FormModel();
         new_model.url = model_url;
         new_model.fetch({ async: false });
         <---------
hideLoadingImage();
}

这仅适用于firefox和chrome调试模式。我想用chrome来完成这项工作。

Answer 1

Backbone Model.fetch委托给jQuery.ajax。在jQuery 1.8及更高版本中不推荐使用async:false：https://api.jquery.com/jQuery.ajax/

[..]从jQuery 1.8开始，使用async：false和jqXHR（$ .Deferred）已弃用;您必须使用success / error / complete回调选项而不是jqXHR对象的相应方法如jqXHR.done（）或不推荐使用的jqXHR.success（）。

您应该修改脚本以异步方式执行调用并将hideLoadingImage移动到回调中。

new_model.fetch({
success: function(){
        hideLoadingImage();
    }
});

这样它会等到收到对隐藏的响应，而不是在请求仍在进行时隐藏。

Answer 2

有点晚了，但我明白了这一点。

如果被误解，请告诉我。

Chrome正在改变元素风格，但网络请求阻止了＆＃34; reflow＆＃34;而mozilla UI线程不会干扰网络，因此它在mozilla中工作。

我能找到的解决方案 -

成功更改DOM后使用setTimeout。
不要使用async：false，应该使用成功，失败回调也是如此。[上面提到@Rondel，谢谢。 ]

JS骨干载入图片

2 个答案: