jQuery 큐 제어 메소드 queue()/dequeue()/clearQueue()_jquery에 대한 자세한 설명

먼저 각 메서드의 의미를 설명하겠습니다.
queue(name,[callback]): 단 하나의 매개변수만 전달되면 반환되어 첫 번째로 일치하는 요소의 대기열을 가리킵니다( 이는 함수 배열이 되며 대기열 이름의 기본값은 fx입니다. 두 개의 매개변수가 전달되면 첫 번째 매개변수의 기본값은 여전히 ​​fx이고 두 번째 매개변수는 두 가지 상황으로 나뉩니다. 함수의 경우 일치하는 요소의 대기열 끝에 함수를 추가합니다. 두 번째 매개변수가 함수 배열인 경우 일치하는 요소의 대기열을 새 대기열(함수 배열)로 교체합니다. 나중에는 데모를 보려면 여기를 클릭하세요.
dequeue(name): 이것은 이해하기 쉽습니다. 대기열을 제거하는 것입니다. 함수를 대기열 앞쪽에서 가져와 실행합니다.
clearQueue([queueName]):이것은 1.4의 새로운 메서드입니다. 개체에서 실행되지 않은 모든 대기열을 지웁니다. 선택 사항이고 기본값은 fx입니다. 하지만 개인적으로 이 메서드는 유용하지 않다고 생각합니다. 이제 queue() 메서드를 사용하여 두 매개 변수 중 두 번째 매개 변수를 전달하여 clearQueue 메서드를 구현할 수 있습니다. , 우리는 그러한 효과를 얻고 싶습니다. 1부터 7까지 표시된 숫자 사각형이 있습니다. 이 7개는 필수입니다. 블록은 왼쪽에서 오른쪽으로 순차적으로 떨어집니다.
데모를 보려면 여기를 클릭하세요
Css와 html 부분은 게시하지 않겠습니다. 이는 DEMO에 포함되어 있습니다. 일반적인 관행에 따르면 구현하려면 다음 jQ 코드를 사용해야 할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$('.one').delay(500).animate ({top:' =270px'},500,function(){
$('.two').delay(500).animate({ top:' =270px'},500,function(){
$('.3').delay(500).animate({top:' =270px'},500,function(){
$('.four').delay(500).animate( {top:' =270px'},500,function(){
$('.five').delay(500).animate({top:' =270px'},500,function(){
$('.six').delay(500).animate({top:' =270px'},500,function(){
$ ('.seven').animate({top:' =270px '},500,function(){
alert('순차적인 낙하 동작이 종료됩니다!')
})
})
}); >});
});


글쎄 효과는 완벽하지만 이 어지러운 코드를 견딜 수 있습니까? 이때 특정 실행 순서를 변경하려는 경우(예: 3이 떨어지기 시작하기 전에 5가 떨어지기를 원하는 경우) 또는 8에서 15까지 8개의 새 사각형을 추가한 후 어떻게 해야 합니까? 분명히 이 효과를 얻으려면 또 다른 간결하고 편리한 방법이 필요합니다. 바로 jQuery 대기열 제어 방법입니다. 다음 코드를 살펴보세요.

코드 복사

코드는 다음과 같습니다: var _slideFun=[ function (){$('.one').delay(500). animate({top:' =270px'},500,_takeOne);},

function(){$('.two').delay (300).animate({top:' =270px'},500 ,_takeOne);},

function(){$('. three').delay(300).animate({top:' =270px '},500,_takeOne);},
function() {$('.four').delay(300).animate({top:' =270px'},500,_takeOne);},
function(){$('.five').delay(300 ).animate({top:' =270px'},500,_takeOne);},
function(){$('.six') .delay(300).animate({top:' =270px'} ,500,_takeOne);},
function(){$('.seven').delay(300).animate({top:' =270px'},500,function(){
alert( '연속 낙하 동작 종료!');
]
$('#demo') .queue('slideList',_slideFun)
var _takeOne=function (){
$('#demo').dequeue('slideList');
_takeOne()


이렇게 하면 훨씬 간단해 보입니다. . 어떻게 구현하나요?
1. 새로운 배열을 만들고 애니메이션 기능을 순서대로 배치합니다. (이런 식으로 순서를 바꾸고 새로운 애니메이션을 추가하는 것이 편리할까요?
2. 이 애니메이션 함수 배열 세트를 SlideList 대기열에 추가합니다.
3. dequeue를 사용하여 SlideList 대기열에서 첫 번째 함수를 꺼내 실행합니다.
첫 번째 함수도 실행합니다. DEMO 데모의 자세한 설명을 참조하세요. 위 설명이 여전히 이해되지 않는다면 소스 코드를 살펴보세요.

ClearQueue() 메서드에 대해서는 더 이상 설명하지 않겠습니다. 물론, queue() 메서드를 사용하여 현재 함수 대기열을 [] 빈 배열로 직접 바꿀 수도 있습니다. (개인적으로는 빈 배열 교체를 권장합니다.

Mr.Think 블로그의 원본 게시물: http://mrthink.net/jqueyapi-queue-dequeue/