内容简介:队列是那么这是
前言
队列是 jQuery
内部的基础设施, animate
动画依赖的基础设施,整个 jQuery
中队列仅供给动画使用。
那么 jQuery
引入队列其实从一个角度上可以认为:允许一系列函数被异步地调用而不会阻塞程序。
$(selector).slideUp().fadeIn()
这是 jQuery
的一组动画链式序列,它的内部其实就是一组队列 Queue
, 当 slideUp
运行时, fadeIn
被放到 fx
队列中,当 slideUp
完成后,从队列中被取出运行。 queue
函数允许 直接操作这个链式调用的行为。同时, queue
可以指定队列名称获得其他能力,而不局限于 fx
队列。
jQuery
提供了 2
组队列操作的 API
:
jQuery.queue/dequeue
– jQuery.fn.queue/dequeue
队列方法
$.queue
: 显示或操作匹配的元素上已经执行的函数列队。
这个方法有两个作用,它既是 setter
,又是 getter
。第一个参数 elem
是 DOM
元素,第二个参数 type
是字符串,第三个参数 data
可以是 function
或数组。 type
默认是 fx
,也就是默认是给 fx
动画队列使用的。
var body = $('body'); function cb1() {alert(1)} function cb2() {alert(2)} //set $.queue(body, 'aa', cb1); // 第三个参数为function $.queue(body, 'aa', cb2); //get $.queue(body, 'aa') //[function ,function]
Queue
源码,用 jquery
内部的 Data
对象进行缓存:
queue: function(elem, type, data) { var queue; if (elem) { type = (type || "fx") + "queue"; queue = data_priv.get(elem, type); // Speed up dequeue by getting out quickly if this is just a lookup if (data) { if (!queue || jQuery.isArray(data)) { queue = data_priv.access(elem, type, jQuery.makeArray(data)); } else { queue.push(data); } } return queue || []; } },
$.dequeue
: 匹配的元素上执行队列中的下一个函数。
var body = $('body'); function cb1() {console.log(11)} function cb2() {console.log(22)} //set $.queue(body, 'aa', cb1); // 第三个参数为function $.queue(body, 'aa', cb2); $.dequeue(body, 'aa') //11 $.dequeue(body, 'aa') //22
将回调函数出列执行,每调用一次仅出列一个,因此当回调有 N
个时,需要调用 $.dequeue
方法 N
次元素才全部出列。源码:
var dequeue = jQuery.dequeue(elem, type), startLength = queue.length, fn = queue.shift(), hooks = jQuery._queueHooks(elem, type), next = function() { jQuery.dequeue(elem, type); };
动画队列
动画的链式调用就是用队列来实现的,当我们链式执行动画的时候,当前执行的动画在缓存中会变为 inprogress
状态,只有等这个状态结束了,后面的动画才能执行。当第一个动画执行完毕后,那么必须有一个回调通知这个去把队列中下一个执行给取出来,然后要删掉这个 inprogress
状态,依次循环。
参考文章
1. 动画队列
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- rabbitmq实现延时队列(死信队列)
- 消息队列(三)常见消息队列介绍
- 消息队列探秘 – RabbitMQ 消息队列介绍
- 消息队列和任务队列有什么区别?
- 数据结构之——队列与循环队列
- 【Android 动画】动画详解之属性动画(三)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。