jQuery-Warteschlangenbetriebsmethode example

jQuery-Warteschlangenbetriebsmethode example_jquery

WBOY

Freigeben： 2016-05-16 16:45:06

Original

1148 Leute haben es durchsucht

Im Kern von jQuery gibt es eine Reihe von Methoden zur Warteschlangensteuerung, die aus drei Methoden bestehen: queue()/dequeue()/clearQueue() Man kann sagen, dass sie prägnant und einfach zu steuern sind Funktionen, die kontinuierlich und nacheinander ausgeführt werden müssen, werden hauptsächlich in der animate()-Methode, Ajax und anderen Ereignissen verwendet, die in chronologischer Reihenfolge ausgeführt werden müssen.

Erklären wir zunächst die Bedeutung dieser Methodengruppe.

queue(name,[callback]): Wenn nur ein Parameter übergeben wird, kehrt er zurück und zeigt auf die Warteschlange des ersten übereinstimmenden Elements (es handelt sich um ein Funktionsarray, der Warteschlangenname ist standardmäßig fx). ; Wenn zwei Parameter übergeben werden, ist der erste Parameter immer noch der Warteschlangenname von fx. Der zweite Parameter ist in zwei Situationen unterteilt. Wenn der zweite Parameter eine Funktion ist, wird eine Funktion am Ende der Warteschlange hinzugefügt Wenn der zweite Parameter ein Funktionsarray ist, wird die Warteschlange der passenden Elemente durch eine neue Warteschlange (Funktionsarray) ersetzt. Dies ist möglicherweise etwas verwirrend. : Dies ist leicht zu verstehen, es geht darum, ein Element aus der Warteschlangenfunktion zu entfernen und es auszuführen

clearQueue([queueName]): Dies ist eine neue Methode in 1.4 Die Parameter sind optional und die Standardeinstellung ist fx. Es ist jedoch nicht sehr nützlich, die Methode queue() zu verwenden, um sie zu implementieren ClearQueue-Methode.

Jetzt wollen wir einen solchen Effekt erzielen, indem wir die Zahlenquadrate von 1 bis 7 markieren. Diese sieben Quadrate müssen in der Reihenfolge von links nach rechts fallen. Schauen Sie sich die CSS- und HTML-Teile an DEMO
. Sie sind in der DEMO enthalten. Wenn Sie der normalen Vorgehensweise folgen, müssen Sie möglicherweise den folgenden jQ-Code verwenden, um dies zu erreichen:

Code kopieren Der Code lautet wie folgt:

$('.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,
            function() $('.fünf').delay(500).animate ({
                    top: ' =270px'
                },
               500,
                function()             $('.six').delay(500).animate({
 top: ' =270px'
                    },
                             function() {
                       $('.seven').animate({
                            top: ' =270px'
                       } ,
                       500,
                                       . warning('按序落体运动Ja! Ja!')
                       });
                   });
            });
       . });
    });
});





嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3,或者新加8至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({
        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('按序落体运动结束! Yeah!');
    }); 
}];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
    $('#demo').dequeue(' slideList');
};
_takeOne();

这样一来, 看起来是不是简明多了. 如何实现?
1.
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.

Erkennen Sie die Funktion „clearQueue()“ und die Funktion „clearQueue()“, die Funktion „Queue()“ und die Funktion „queue()“.法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).