chrome浏览器中的jQuery代码执行问题

Question

 function refreshdata() { $('.overlayloading').toggle(true); fetchData(); } 

Here $('.overlayloading').toggle(true) is executing only after the execution of fetchData() in chrome. Its working fine in Mozilla. But it's not working in google chrome browser. I am trying to load loading animation before the fetchData function.But loading animation is showing after the execution of fecthData function.

Answer 1

You can pass a callback to toggle, so it actually waits for the animation to be finished before executing the function.

$('.overlayloading').toggle(400,fetchData);

If you want data to be loaded before the animation begins, you could pass the toggle function as callback to your fetchdata or return a promise, which you will use to execute the toggle within then()

Answer 2

jQuery is making asynchronous animations, javaScript runs on the browser's UI thread, if it was synchronous then the UI would freeze until the animation finishes.

What You can do is use the callback method of .toggle , it will run after the toggle animation completes. Docs

function refreshdata()
  $('.overlayloading').toggle("slow", function() {
    // Animation complete.
    fetchData();
  });
});

Answer 3

You can try

function refreshdata() {
  $('.overlayloading').toggle(true);
  window.requestAnimationFrame(fetchData);
}

to make sure the display toggle actually takes full effect in the view before invoking fetchData .