jQuery의 queue() 함수 대기열의 사용 예에 ​​대한 자세한 설명

이 글에서는 jQuery의 queue() 함수에 대한 예제 튜토리얼을 주로 소개합니다. queue() 함수는 JavaScript 함수의 실행 순서 제어 작업에 대한 편의를 제공합니다. 현재 jQuery 객체 여러 요소 일치: 대기열을 가져올 때 대기열(대체 대기열, 추가 기능)을 설정할 때 첫 번째 일치하는 요소에서만 대기열을 가져오고 일치하는 각 요소에 대해 별도로 설정합니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다. 대기열의 첫 번째 함수를 제거하고 실행해야 하는 경우 dequeue() 함수를 사용하세요. ClearQueue() 함수를 사용하여 지정된 대기열을 지울 수도 있습니다.

Syntax

이 기능은 jQuery 1.2에서 추가되었습니다. queue() 함수에는 다음 두 가지 용도가 있습니다.
사용법 1:

jQueryObject.queue( [ queueName ] [, newQueue ] )

매개변수가 지정되지 않거나 queueName 매개변수만 지정된 경우 지정된 이름의 함수 대기열을 얻는다는 의미입니다. newQueue 매개변수가 지정되면 새 대기열 newQueue가 현재 대기열의 모든 콘텐츠를 설정(교체)하는 데 사용된다는 의미입니다.

사용법 2:

jQueryObject.queue( [ queueName ,] callback )

지정된 대기열에 지정된 함수를 추가합니다(끝).

참고: queue() 함수의 모든 설정 작업은 현재 jQuery 개체와 일치하는 각 요소에 대해 수행됩니다. 모든 읽기 작업은 첫 번째 일치하는 요소에서만 수행됩니다.

Parameters

이전 구문 섹션에 정의된 매개변수 이름에 따라 해당 매개변수를 찾으세요.
queueName: 선택 사항/String
유형 지정된 대기열 이름, 기본값은 "fx"(jQuery의 표준 애니메이션 효과 대기열을 나타냄)입니다. newQueue: 현재 대기열의 새 대기열 콘텐츠를 대체하는 데 사용되는 옵션/배열 유형입니다. 콜백: 함수 유형에 지정된 함수가 대기열에 추가됩니다. 이 함수에는 대기열의 첫 번째 함수를 제거하고 실행하기 위해 호출할 수 있는
함수 매개변수
가 있습니다.

반환 값

queue()
함수의 반환 값은 Array/jQuery 유형입니다. 반환 값의 유형은 현재 queue() 함수가 get 작업을 수행하는지 아니면 set 작업을 수행하는지에 따라 다릅니다. queue() 함수가 설정 작업(큐 교체, 함수 추가)을 수행하면 현재 jQuery 객체 자체를 반환하고, 검색 작업인 경우 획득한 함수 대기열(배열)을 반환합니다. 현재 jQuery 객체가 여러 요소와 일치하는 경우 데이터를 읽을 때 queue() 함수는 첫 번째로 일치하는 요소만 사용합니다.

예:

1. jQuery는 대기열에 필요한 일부 코드를 삽입하는 queue() 함수를 제공합니다. 그것을 웹페이지에 접속해서 실행해 보면, "보이는 대로 얻는다"가 아니며 전혀 효과가 없다는 것을 알게 될 것입니다.
수정됨:

$('#test-change1').toggle(function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-goal1'));
    next();
  }).show('slow');

},function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-origin1'));
    next();      
  }).show('slow');
});

dequeue()의 일반적인 정의는 "큐의 최상위 함수를 삭제하고 실행합니다"입니다. 나는 "삭제"라는 단어에 동의하지 않지만 "제거"를 선호합니다. 사실 이 함수의 기능은 큐의 이전 함수가 실행된 후 마지막 큐에 대한 포인터와 같습니다. 대기열의 기능이 제거되었습니다.

3.queue: false

$("p").queue("custom", function(next) {
  $('p').css({'background':'red'});
  next();
});

처음 1000밀리초 동안에는 높이를 제어하는 ​​"fx" 대기열만 실행되고 다음 1000밀리초에는 불투명도와 높이를 제어하는 ​​"fader" 대기열이 실행됩니다. 높이를 제어하는 ​​"fx"는 병렬로 실행됩니다. 여기서 평행은 queue:false

$("p").queue("custom", function(next) {
  $('p').css({'background':'red'});
  next();
})
.dequeue("custom"); //this is the key

4입니다. 대기열 길이 가져오기

예를 들어, 일치하는 요소의 길이를 얻으려면 대기열 이름을 사용하십시오.

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
  $(this).animate({opacity: 0},
    {duration: 1000, queue: false});
  next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

분명히 대기열 이름이 'fx'인 대기열을 가져옵니다. , 길이를 얻으려면 :

$('#section3a').slideUp(1000)
      .slideDown(1000)
      .animate({width: '50px'}, {duration: 1000, queue: false});

여기서 대기열 길이는 아직 실행되지 않은 일치 요소의 대기열 길이일 뿐이라는 점에 유의하세요. 애니메이션 실행이 완료되면 대기열 길이가 자동으로 0

으로 돌아갑니다.

5. 대체 대기열

var $queue=$("p").queue('fx');

여기에는 두 개의 대기열이 정의되어 있습니다. 하나는 기본 'fx'인 느린 대기열이고 다른 하나는 빠른 대기열 'fx2'입니다.

버튼을 클릭할 때:

var $length=$('p').queue('fx').length;

위 내용은 jQuery의 queue() 함수 대기열의 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!