javascript - JS主干加载图片

Question

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

在 Firefox 中一切正常，但在 Chrome 中则不然。

在 Chrome 中，只有在应用断点后我才能看到加载轮。

请求需要 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 Debug模式下正常工作。 我想在 Chrome 中完成这项工作。

Answer 1

Backbone Model.fetch 委托(delegate)给 jQuery.ajax。 jQuery 1.8 及更高版本中已弃用 async:false 的使用:https://api.jquery.com/jQuery.ajax/

[..] As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

您应该修改脚本以异步执行调用，并将 hideLoadingImage 移至回调中。

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

这样，它将等到收到响应后再调用 hide，而不是在请求仍在进行时隐藏。