CODEWITHSUNDEEP
javascriptjqueryfirefoxgoogle-chrome-devtools
Pranav
Pranav

Reputation: 2172

JS backbone Loading image

I have an application running, which displays 'loading wheel' while fetching data from server.

All works correctly in Firefox and not in Chrome.

In chrome I can see the loading wheel only after applying breakpoint.

Request takes 3-4 seconds to complete. Without breakpoint I can not see the loading wheel.

I have these two wrappers for jquery

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

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

So I call it like -

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

This works correctly in firefox and in chrome debug mode only. I want to get this work in chrome.

Upvotes: 1

Views: 479

Answers (2)

Pranav
Pranav

Reputation: 2172

A bit late but I got this point.

Please let me know if misunderstood.

Chrome was changing element style but network request was blocking the "reflow" whereas mozilla UI thread does not interfere with network hence it worked in mozilla.

Solutions I could find -

  1. use setTimeout after successful DOM change.
  2. do not use async:false, one should use success,failure callbacks for the same.[suggested above by @Rondel, thanks. ]

Upvotes: 0

Rondel
Rondel

Reputation: 4951

Backbone Model.fetch delegates to jQuery.ajax. The use of async:false is deprecated in jQuery 1.8 and greater: 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().

You should revamp your script to do the call asynchronously and move hideLoadingImage into the callback.

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

This way it will wait until it receives the response to call hide instead of hiding while the request is still in progress.

Upvotes: 1

Related Questions