jQuery 큐 제어 메소드 queue()/dequeue()/clearQueue()에 대한 자세한 설명-JS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-06-20 15:08:52

원래의

1240명이 탐색했습니다.

jQuery의 핵심에는 queue 제어 메소드 세트가 있습니다. 이 메소드 세트는 queue()/dequeue()/clearQueue()의 세 가지 메소드로 구성됩니다. 연속적이고 순차적으로 실행되어야 하는 함수. 주로 animate() 메소드에 사용되는 Ziru, ajax 및 기타 이벤트를 시간순으로 실행해야 합니다.

먼저 이 메소드 그룹의 의미를 설명하세요.
queue (name,[callback]): 매개변수가 전달된 경우에만 첫 번째로 일치하는 요소의 대기열을 반환하고 가리킵니다(함수 배열이 되며 매개변수가 두 개인 경우 대기열 이름의 기본값은 fx입니다). 전달된 첫 번째 매개변수는 기본적으로 fx입니다. 두 번째 매개변수는 두 가지 상황으로 나누어집니다. 두 번째 매개변수가 함수인 경우 두 번째 매개변수가 일치하는 경우 대기열 끝에 함수를 추가합니다. 함수 배열이면 일치합니다. 요소의 대기열이 새로운 대기열(함수 배열)로 대체됩니다. 어쩌면 이해하기가 다소 혼란스러울 수도 있습니다. 나중에 DEMO를 살펴보겠습니다. name):

이것은 이해하기 쉽습니다. 대기열의 끝에서입니다. 프런트 엔드는 대기열 기능을 제거하고 실행합니다.

clearQueue([queueName]):1.4
에 추가된 새로운 메서드입니다. 아직 실행되지 않은 개체의 모든 대기열을 지웁니다. 매개 변수는 선택 사항이며 기본값은 fx입니다. 그러나 개인적으로 이 방법은 두 번째 매개 변수를 전달하는 데 별로 유용하지 않다고 생각합니다. 이제 이러한 효과를 얻으려고 합니다. 1부터 7까지 표시된 디지털 사각형이 있습니다. 7개의 사각형이 왼쪽에서 오른쪽으로 차례로 떨어집니다. 데모를 보려면 여기를 클릭하세요.

Css와 html 부분은 게시하지 않겠습니다. 일반적인 방법을 따르면 다음 jQ 코드 구현을 사용해야 할 수도 있습니다.

$(&#39;.one&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
		$(&#39;.two&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
			$(&#39;.three&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
				$(&#39;.four&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
					$(&#39;.five&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
						$(&#39;.six&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,function(){
							$(&#39;.seven&#39;).animate({top:&#39;+=270px&#39;},500,function(){
								alert(&#39;按序落体运动结束! Yeah!&#39;)
							});
						});
					});
				});
			});
		});
	});

로그인 후 복사

글쎄요. , 예, 효과는 완벽하게 나타납니다. 하지만 이 어지러운 코드를 견딜 수 있습니까? 견딜 수 있다고 해도 이때 특정 실행 순서를 교체하려는 경우, 예를 들어 시작하기 전에 5가 떨어지기를 원하는 경우 가을 3, 또는 8에서 15까지 8개의 새로운 블록을 추가하려면 어떻게 해야 합니까? 변경 사항에 주의해야 합니까? 분명히 이 효과를 얻으려면 다른 종류의 시퀀스가 필요합니다. jQuery 대기열 제어 방법은 다음 코드를 참조하세요.

var _slideFun=[
	function(){$(&#39;.one&#39;).delay(500).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.two&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.three&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.four&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.five&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.six&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,_takeOne);},
	function(){$(&#39;.seven&#39;).delay(300).animate({top:&#39;+=270px&#39;},500,function(){
		alert(&#39;按序落体运动结束! Yeah!&#39;);
	});}
];
$(&#39;#demo&#39;).queue(&#39;slideList&#39;,_slideFun);
var _takeOne=function(){
	$(&#39;#demo&#39;).dequeue(&#39;slideList&#39;);
};
_takeOne();

로그인 후 복사

이렇게 하면 훨씬 간단해 보입니다. 어떻게 구현하나요?

1. 새 배열을 만들고

Animation

함수를 차례대로 넣습니다. (이 방법으로 순서를 변경하면 새 애니메이션을 추가하는 것이 더 편리합니까?)
2. 대기열을 사용하여 이 애니메이션 함수 배열 세트를 SlideList 대기열에 추가합니다.

4. 첫 번째 함수의 초기 실행
데모 데모에도 자세한 설명이 있습니다. ClearQueue() 메서드에 대해서는 말할 것도 없이 데모의 중지 버튼이 ClearQueue() 메서드를 호출합니다. 물론 queue() 메서드를 사용하여 현재 함수 대기열을 []로 직접 바꿀 수도 있습니다. 빈 배열 구현(저는 개인적으로 빈 배열 교체를 권장합니다. 이것이 더 직관적입니다)

위 내용은 jQuery 큐 제어 메소드 queue()/dequeue()/clearQueue()에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!