jQuery 큐 작업 방법 example_jquery

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

먼저 이 메서드 그룹의 의미를 설명하겠습니다.

queue(name,[callback] ): 하나의 매개변수만 전달되면 반환되어 첫 번째로 일치하는 요소의 대기열을 가리킵니다(함수 배열이 되며 대기열 이름의 기본값은 fx입니다). ; 두 개의 매개변수가 전달되면 첫 번째 매개변수는 여전히 fx의 대기열 이름입니다. 두 번째 매개변수는 두 가지 상황으로 나누어집니다. 두 번째 매개변수가 함수인 경우 대기열 끝에 함수가 추가됩니다. 두 번째 매개변수가 함수 배열인 경우 일치하는 요소의 대기열을 새로운 대기열(함수 배열)로 대체합니다. 아마도

dequeue(name)입니다. : 이해하기 쉽습니다. Queue 함수의 앞부분에서 항목을 제거하고 실행하는 것입니다.

clearQueue([queueName]): 1.4의 새로운 메소드입니다. 매개변수는 선택사항이고 기본값은 fx입니다. 하지만 개인적으로 이 방법은 별로 유용하지 않다고 생각합니다. 두 매개변수 중 두 번째 매개변수를 전달하여 구현하면 됩니다.

이제 1부터 7까지 표시된 숫자 사각형을 사용하여 이러한 효과를 얻고 싶습니다. 이 7개의 사각형은 왼쪽에서 오른쪽으로 순서대로 나열되어야 합니다. 데모
게시하지는 않겠습니다. 기존 접근 방식을 따르면 이를 달성하기 위해 다음 jQ 코드를 사용해야 할 수도 있습니다.

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

$('.one').delay(500).animate({
    top: ' =270px'
},
500,
function() {
    $('.two').delay(500).animate({
        top: ' =270px'
    },
    500,
    function() {
        $('. three').delay(500).animate({
            top: ' =270px'
        },
        500,
        function() {
            $('.four').delay (500).animate({
                top: ' =270px'
            },
            500,
            {
               $('.five').delay(500).animate ({
                   상단: ' =270px'
               },
               500,
               기능() {
                    $('.six').delay(500).animate({
상단: ' =270px'
                   },
                  500,
                  기능() {
                      $('.seven').animate({
                           top: ' =270px'
                      } ,
                      500,
                     기능() {
                       경고('按序载运动정말! 응!')
                       });
                  });
              });
           });
        });
    });
});

嗯, 没错, 效果很完美的呈现给 出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 15八个方块, 怎么办? 写吗? 이 곳의 작은 심장에는 오락실이 있나요? 显然, 我们需要另외일种列简明便捷적방법来实现这个效果, 那就是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({
        상단: ' =270px '
    },
    500, _takeOne);
},
function() {
    $('.five').delay(300).animate({
        상단: ' =270px'
    },
    500, _takeOne);
},
function() {
    $('.six').delay(300).animate({
        상단: ' =270px'
    },
    500, _takeOne);
},
function() {
    $('.seven').delay(300).animate( {
        top: ' =270px'
    },
    500,
    function() {
        Alert('按序落体运动结束! Yeah!');
    });
}];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
    $('#demo').dequeue(' SlideList');
};
_takeOne();

这样一来, 看起来是不是简明多了. 如何实现?
1. 새로운 建一个数组, 把动画函数依次放进去(这样更改顺序, 新加动画是不是方便多了?);
2. 사용 대기열将这组动画函数数组加入到slideList队列中;
3. 대기열에서 제거하기 슬라이드 목록队列中第一个函数, 并执行它;
4. 初始执行第一个函数.