javascript - What is the execution process when the each function traversal in jQuery is used together with the animate function?

Question

$("#banner ul li").each(function(i){
          $(this).animate({
                        width: arrW[index],
                         height: arrH[index],
                        opacity: arrO[index],
                        left: arrL[index],
                        top: arrT[index]

                    },500)
                }

What I don’t understand is that when each loop is performed, the execution of the animation takes 500ms. Does that mean that the next loop will be started after the animation execution ends, that is, 500 milliseconds? Or do you wait for the animation to finish executing before executing the next cycle?

Answer 1

Each is mainly just traversal, there is no asynchronous call operation, while animate's animation mainly uses delay, which is asynchronous.

http://www.zhangyunling.com/2...

This is like:

for(var i=0;i<100;i++){
    setTimeout(function(){
        console.log('一次延迟回调');
    },1000);
}

So, the animation callback should enter the task queue, so the loop is executed first.

Answer 2

The binding events should be looped first and then done at the same time.
In other words, before the animation is executed, a loop is first made and the animation is bound to each element. After the loop ends, all elements undergo this animation at the same time.