jQuery中的队列

作者: ferrint | 来源:发表于2017-03-01 19:02 被阅读8次

    关键词:队列

    语法:

    工具方法: $.queue(newQueue, queueName, callback);
    函数执行: $('#box').queue(queueName, callback)

    jquery队列是统一管理函数得执行顺序的,把函数放进一个有名称的队列中,在出队的时候执行。

        function fn1() {
            console.dir("f1")
        }
        function fn2() {
            console.dir("f2")
        }
        function fn3() {
            console.dir("f3")
        }
    
        // 入队 把函数添加到队列
        $.queue(document,'myque',fn1);
        $.queue(document,'myque',fn2);
        $.queue(document,'myque',fn3);
    
      // 出队 执行函数
        $.dequeue(document,'myque',fn1);    //f1
        $.dequeue(document,'myque',fn2);    //f2
        $.dequeue(document,'myque',fn3);    //f3
    

    当让你也可以写成这样的形式:
    * $(document).dequeue('myque',fn1);

    值得注意的是,队列会异步执行,只有当前动作执行完了才可以执行下一个动作,(就像银行取款机,同一时间里面只能有一个人,只有当里面的人取完钱走了,下一个才可以进入,取钱,走人完成一整套动作之后下一个再重复
    比如出队时我们这样调用:
    * $.dequeue(document,'myque',fn3); //f1,f2
    执行的是f1,f2出队,如果我们想要f3出队,就要这样做:

        $.dequeue(document,'myque',fn3);  
        $.dequeue(document,'myque',fn3); 
        $.dequeue(document,'myque',fn3); 
    
    

    好了,队列概念我们就讲完了,这看起来并没有什么乱用,当时在jQuery却无处不在,比如
    * $('#foo').slideUp().fadeIn();
    只有在slideUp()执行完了之后才能执行fadeIn;

    我们还可以用队列做异步动画:

        $('#box').animate({width:200},1000);
        $('#box').animate({height:200},1000);
        $('#box').animate({left:200},1000);
    

    jQuery中延迟的方法也是通过队列实现的:

        $('#box').animate({width:200},1000);
        $('box').delay(2000);
        $('#box').animate({height:200},1000);
        $('#box').animate({left:200},1000);
    

    相关文章

      网友评论

        本文标题:jQuery中的队列

        本文链接:https://www.haomeiwen.com/subject/esjcgttx.html