Yunhero
239***7958@qq.com
队列操作
jquery中有一个Queue队列的接口,这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的,Queue队列如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施
Queue队列
队列是一种特殊的线性表,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行出入操作(入队),队列的特点是先进先出,最先插入的元素最先被删除。
为什么要引入队列
var a = 1; setTimeout(function(){ a=2; },0) alert(a);
我们一直习惯于线性的编写代码逻辑,但是在JavaScript编程几乎总是伴随着异步操作:
setTImeout,css3Transition/Animation,ajax,dom的绘制,postmessage,web Database 等等,大量异步操作所带来的回调函数会把我们的算法分解,对于“异步+回调”的模式,怎么“拉平”异步操作使之跟同步一样,因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑,所以就会出现 promises 约定了。
那么 jQuery 引入队列其实从一个角度上可以认为:允许一系列函数被异步地调用而不会阻塞程序。
看一个代码段:
$("#Aaron").slideUp().fadeIn()
这是 jQuery 的一组动画链式序列,它的内部其实就是一组队列 Queue,所以队列和 Deferred 地位类似,是一个内部使用的基础设施。
Queue 函数允许直接操作这个链式调用的行为,同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。
jQuery 提供了 2 组队列操作的 API:
jQuery.queue/dequeue jQuery.fn.queue/dequeue
但是不同与普通队列定义的是:
对于 jQuery 的动画的设计我们要分 2 个层面理解:
动画的源码:
animate: function(prop, speed, easing, callback) { doAnimation = function() { var anim = Animation(this, args, optall); }; this.queue(optall.queue, doAnimation); }
这个代码缩减了,但是我们上面提到的最重要的 2 点这里都涉及到了:通过 queue 调度动画的之间的衔接,Animation 方法执行单个动画的封装。
jQuery 在 queue 的调度上涉及了一个关键的处理:同步与异步代码同时执行,同步收集动画序列,异步调用序列,看看整个调用的流程是这样的:
以上是整个动画的调度一个流程,其实都是利用队列异步的空闲然后执行同步的代码,这样在处理上是没有浪费资源的,而且精确度也是最高的。
取消
感谢您的支持,我会继续努力的!
打开支付宝扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
用户名
密码
记住登录状态 忘记密码?
邀请码
邮箱
重复输入密码
如何获取邀请码?
Yunhero
239***7958@qq.com
队列操作
jquery中有一个Queue队列的接口,这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的,Queue队列如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施
Queue队列
队列是一种特殊的线性表,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行出入操作(入队),队列的特点是先进先出,最先插入的元素最先被删除。
为什么要引入队列
我们一直习惯于线性的编写代码逻辑,但是在JavaScript编程几乎总是伴随着异步操作:
setTImeout,css3Transition/Animation,ajax,dom的绘制,postmessage,web Database 等等,大量异步操作所带来的回调函数会把我们的算法分解,对于“异步+回调”的模式,怎么“拉平”异步操作使之跟同步一样,因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑,所以就会出现 promises 约定了。
那么 jQuery 引入队列其实从一个角度上可以认为:允许一系列函数被异步地调用而不会阻塞程序。
看一个代码段:
这是 jQuery 的一组动画链式序列,它的内部其实就是一组队列 Queue,所以队列和 Deferred 地位类似,是一个内部使用的基础设施。
Queue 函数允许直接操作这个链式调用的行为,同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。
jQuery 提供了 2 组队列操作的 API:
但是不同与普通队列定义的是:
Yunhero
239***7958@qq.com
Yunhero
239***7958@qq.com
对于 jQuery 的动画的设计我们要分 2 个层面理解:
动画的源码:
这个代码缩减了,但是我们上面提到的最重要的 2 点这里都涉及到了:通过 queue 调度动画的之间的衔接,Animation 方法执行单个动画的封装。
jQuery 在 queue 的调度上涉及了一个关键的处理:同步与异步代码同时执行,同步收集动画序列,异步调用序列,看看整个调用的流程是这样的:
以上是整个动画的调度一个流程,其实都是利用队列异步的空闲然后执行同步的代码,这样在处理上是没有浪费资源的,而且精确度也是最高的。
Yunhero
239***7958@qq.com