Question 206116 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Loader is not visible without timeout

I am using Ember JS for an application, I want to show the full loader before updating my DOM, like

Ember.$("#full-loader").css("display","block");
someFuncToUpdateDOM();
Ember.$("#full-loader").css("display","none");

The full-loader is never shown, but when I use setTimeOut() on calling the someFuncToUpdateDOM(), now the full-loader shows!!!. What causes this?

Note: I have utilised the did Render hooks too!!, the above code is only for reference.

Tags:

2

Answers


  1. 0

    you can try requestAnimationFrame() instead of setTimeout()

    Ember.$("#full-loader").css("display", "block");

requestAnimationFrame(() => {
  someFuncToUpdateDOM();

  Ember.$("#full-loader").css("display", "none");
});
    Login or Signup to reply.
  2. 0

    someFuncToUpdateDOM(); is blocking. It just does things on the main event loop.

    The browser doesn’t perform repaints of the DOM while blocking code is running (this is an efficiency feature; it means that you can make 100 changes to the DOM followed by repaint instead of 100 sets of changes with 100 associated repaints).

    Adding setTimeout means that the subsequence blocking code doesn’t run immediately. While it is waiting for the timeout to expire and be put on the queue of tasks, the browser gets on with other things (including repaints).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search