jQuery에서 대기열과 대기열 제거의 사용법 차이

jQuery의 대기열 및 대기열 제거는 순서대로 실행해야 하는 일련의 함수에 특히 유용합니다. 특히 animateanimation, ajax, timeout 및 특정 시간이 필요한 기타 기능

queue 및 dequeue 프로세스는 주로 다음과 같습니다.
1 queue를 사용하여 queue에 함수를 추가합니다(일반적으로 함수 배열).
2. Dequeue를 사용하여

queue에 함수를 추가합니다.

배열의 첫 번째 함수를 꺼내서 실행합니다. (꺼내고 실행하려면 Shift() 메서드를 사용하세요.)

이는 Dequeue가 다시 실행될 때 또 다른 함수를 얻게 됩니다

또한 대기열에서 제거가 실행되지 않으면 대기열의 다음 함수는 절대 실행되지 않는다는 의미입니다.

요소에 애니메이션 메서드와 애니메이션을 실행하기 위해 jQuery는 해당 요소를 함수 대기열에 추가합니다. fx 내부적으로

그리고 여러 요소가 애니메이션을 순차적으로 실행하려면 대기열을 수동으로 설정해야 합니다.

예를 들어, 두 개의 div를 순차적으로 왼쪽으로 이동하려면 여기를 클릭하세요.

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

교대로 적은 횟수만 이동해야 한다면 animate의
콜백 기능

을 사용하여 수행할 수 있습니다. . 하나의 애니메이션이 다른 애니메이션의 콜백 안에 배치됩니다

예를 들어

 $(“#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(“动画结束”);
 });
 });
 });
 });
 });

하지만 이 방법은 애니메이션이 많을 때 단순히 잔인합니다.

이번에는 대기열과 대기열 제거를 사용하는 것이 훨씬 간단합니다.

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 먼저 순서대로 실행해야 하는 일련의 애니메이션이 포함된 함수 배열을 만들 것을 제안했습니다.
2. 그런 다음 콜백을 정의했습니다. 함수 및 사용된 대기열 제거 이 메서드는 대기열

3의 다음 함수를 실행한 다음 이 함수 배열을 문서의 myAnimation 대기열에 넣는 데 사용됩니다. (어떤 요소든 선택할 수 있습니다. 편의상 이 대기열을 문서에 넣었습니다.) )

4, 그리고 드디어 큐의 첫 번째 함수를 실행하기 시작했습니다

이것의 장점은 함수 배열이 선형적으로 확장되어 증감이 매우 편리하다는 점입니다.

또한 더 이상 다음 애니메이션을 계속하고 싶지 않은 경우(예: 사용자가 특정 버튼을 클릭하는 경우) 대기열을 지우기만 하면 됩니다. 더 추가하려면 대기열에 참여하기만 하면 됩니다

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

일정 시간 동안 애니메이션을 일시 중지하는 데 사용되는 대기 플러그인을 이전에 게시했습니다

한 번 보세요. 그는 또한 이 원칙을 사용합니다. 기본적으로 fx에 있습니다. 시간 초과를 삽입하고 대기열에 넣습니다. 대기열에서 다음 기능을 계속 실행하려면 시간 초과가 끝날 때까지 Dequeue가 실행되지 않습니다.

물론 ajax와 같은 메서드에도 사용할 수 있습니다. 일련의 ajax 상호 작용이 필요한 경우 각 ajax는 이전 ajax가 끝난 후 시작하려고 합니다. 이전의 가장 독창적인 방법은 콜백 함수를 사용하는 것이었지만 이것도 마찬가지입니다. 귀찮은. 또한 대기열을 사용하여 대기열을 추가하고 각 ajax 이후 콜백에서 대기열 제거를 한 번 실행합니다.

🎜jQuey 라이브러리를 사용하지 않는 경우 간단한 코드를 직접 작성하여 이 문제를 해결할 수도 있습니다. 🎜

위 내용은 jQuery에서 대기열과 대기열 제거의 사용법 차이의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!