The usage difference between queue and dequeue in jQuery

The queue and dequeue in jQuery are a set of very useful methods. They are particularly useful for a series of functions that need to be run in order. Especially animateanimation, ajax, and timeout and other functions that require a certain amount of time

The process of queue and dequeue is mainly:
1, use queue to add the function to thequeue(Usually a function array)
2, use dequeue to take out the first function in the function array and execute it (use the shift() method to take out and execute it)

means that when it is executed again When dequeueing, you get another function
It also means that if dequeue is not executed, the next function in the queue will never be executed

For executing the animate method on an element to add animation , jQuery will also add it to the function queue named fx internally
. If we want to animate multiple elements in sequence, we must manually set the queue.

An example is to move two divs to the left in turn, click here to view

 div {
 background:#aaa;
 width:18px;
 height:18px;
 position:absolute;
 top:10px;
 }　

If you only move a few times in turn, you can use animate's callback function to do it , one animation is placed in the callback of another animation
For example

 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function(){
 alert(“动画结束”);
 });
 });
 });
 });
 });

But this method is simply cruel when there are many animations.

It is much simpler to use queue and dequeue at this time:

var FUNC=[
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function(){alert("动画结束")}
 ];
 var aniCB=function() {
 $(document).dequeue(“myAnimation”);
 }
 $(document).queue(“myAnimation”,FUNC);
 aniCB();　　

1, I first suggest creating a function array, which contains a series of animations that need to be executed in sequence
2. Then I defined a callback function, using the dequeue method to execute the next function in the queue
3, and then put this function array into the queue of myAnimation on the document (you can select any element, I just want Put this queue on the document for convenience)
4, finally I started to execute the first function in the queue

The advantage of this is that the function array is linearly expanded, and it is very convenient to increase or decrease.
Moreover, when you no longer want to continue the next animation (for example, the user clicks a button), you only need to clear the queue. To add more, you only need to join the queue.

 //清空队列
 $(document).queue(“myAnimation”,[]);
 //加一个新的函数放在最后
 $(document).queue(“myAnimation”,function(){alert(“动画真的结束了！”)});

I have posted a wait plug-in before, which is used to pause animations for a period of time.

You can take a look, he also uses Based on this principle, a timeout is inserted into fx by default and placed in the queue. Dequeue is executed until the timeout is over to continue executing the next function in the queue.

Of course this can also be used for methods such as ajax. If a series of ajax interactions are required, each ajax wants to start after the previous one ends. The most original method before was to use a callback function, but this is too Trouble. Also use queue to add a queue, and execute dequeue once in the callback after each ajax.

If you do not use the jQuey library, you can also write a simple code yourself to solve this problem.

The above is the detailed content of The usage difference between queue and dequeue in jQuery. For more information, please follow other related articles on the PHP Chinese website!