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中的队列

    关键词:队列 语法: 工具方法: $.queue(newQueue, queueName, callback);函...

  • jQuery 动画队列

    jQuery 动画队列 动画队列的方法: 我们知道jQuery提供了以下几种方法来操作动画队列: stop([cl...

  • JQuery中动画队列

    动画队列常用方法 queue([queueName,]callback):将callback动画数添加到当前jQu...

  • jQuery中的动画队列

    为元素btn绑定一个动画效果,先向右移动300px,再向下移动300px,再向左移动300px,再向上移动300p...

  • jQuery 中的动画队列

    动画队列 什么是 jQuery 的动画队列?首先,我们先来了解一下什么是队列。队列是一种特殊的线性表,只允许在表的...

  • Jquery中的动画队列

    当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,j...

  • jQuery中的动画队列

    1.什么是队列? 队列是一种特殊的线性表,遵循先进先出,后进后出原则。 2.jQuery中的动画队列 动画队列可以...

  • jQuery动画队列

    什么是动画队列? jQuery动画存在一个队列, 会把事件产生的动画 放在一个队列中,当来不及执行这些事件队列的时...

  • 怎么理解JQuery中的动画队列

    队列 队列是一种具有 ‘先进先出’特性的线性表,即在前端删除(出),在尾端添加(入)。 在数组中常用到push给数...

  • JQ动画队列

    动画队列 什么是 jQuery 的动画队列?首先,我们先来了解一下什么是队列。队列是一种特殊的线性表,只允许在表的...

网友评论

    本文标题:jQuery中的队列

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