Méthode d'opération de file d'attente jQuery example_jquery

Au cœur de jQuery, il existe un ensemble de méthodes de contrôle de file d'attente. Cet ensemble de méthodes se compose de trois méthodes : queue()/dequeue()/clearQueue(). fonctions qui doivent être exécutées de manière continue et séquentielle, principalement utilisées dans la méthode animate (), ajax et autres événements qui doivent être exécutés dans l'ordre chronologique

Expliquons d'abord la signification de ce groupe de méthodes.

queue(name,[callback] ) : Lorsqu'un seul paramètre est passé, il renvoie et pointe vers la file d'attente du premier élément correspondant (ce sera un tableau de fonctions, le nom de la file d'attente est par défaut fx) ; lorsque deux paramètres sont transmis, le premier paramètre est toujours le nom par défaut de la file d'attente de fx. Le deuxième paramètre est divisé en deux situations. Lorsque le deuxième paramètre est une fonction, il ajoutera une fonction à la fin de la file d'attente. des éléments correspondants. Lorsque le deuxième paramètre est un tableau de fonctions, il remplacera la file d'attente des éléments correspondants par une nouvelle file d'attente (tableau de fonctions). C'est peut-être un peu déroutant à comprendre

dequeue(name). : C'est facile à comprendre, il s'agit de supprimer un élément du début de la fonction Queue et de l'exécuter

clearQueue([queueName]) : Il s'agit d'une nouvelle méthode dans la version 1.4. qui n'ont pas été exécutés sur l'objet. Les paramètres sont facultatifs et la valeur par défaut est fx. Mais je pense personnellement que cette méthode n'est pas très utile. Utilisez la méthode queue() pour transmettre le deuxième paramètre des deux paramètres pour implémenter le. Méthode clearQueue.

Maintenant, nous voulons obtenir un tel effet, avec des carrés numériques marqués de 1 à 7. Ces sept carrés doivent tomber dans l'ordre de gauche à droite. Consultez les parties CSS et HTML de. DEMO
. Je ne les publierai pas. Ils sont dans la DEMO Si vous suivez la pratique normale, vous devrez peut-être utiliser le code jQ suivant pour y parvenir :

.

Copier le code Le code est le suivant :

$('.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() {
               $('.five').delay(500).animate ({
                    haut : ' =270px'
                },
               500,
                function() {
                    $('.six').delay(500).animate({
haut : ' =270px'
                    },
                   500,
                    function() {
                        $('.seven').animate({
                            top : ' =270px'
                         } ,
                        500,
                       function() {
                            alert('按序落体运动结束! Ouais !')
                        });
                   });
               });
            });
       });
    });
});

嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗 ? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, Alors, 8h15, tu sais ? 重写吗? Est-ce que c'est une question de temps ? Il s'agit d'une application, d'une application Web, d'une application Web, d'une application Web, d'une application Web et d'une application Web.代码 :

复制代码 代码如下 :

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

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

pour clearQueue(), pour clearQueue(), pour clearQueue(), pour queue() soit pour接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).