学习jQuery笔记

简介: 学习jQuery笔记

动画调度

对于 jQuery 的动画的设计我们要分 2 个层面理解:

  1. 每一个动画效果可以看作一个独立的动画对象,每个对象都实现了针对自己这个动画的生命周期的控制
  2. 动画对象与动画对象之间其实是没有直接关系,但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制

动画的源码:

animate:function(prop, speed, easing, callback){

  doAnimation =function(){

     var anim =Animation(this, args, optall);

  };

  this.queue(optall.queue, doAnimation);

}

这个代码缩减了,但是我们上面提到的最重要的 2 点这里都涉及到了:通过 queue 调度动画的之间的衔接,Animation 方法执行单个动画的封装。

jQuery 在 queue 的调度上涉及了一个关键的处理:同步与异步代码同时执行,同步收集动画序列,异步调用序列,看看整个调用的流程是这样的:

  1. 通过多个 animate 方法形成动画链,那么这个动画链其实都是会加入到 queue 队列里面
  2. 在每一次 queue 方法中会把动画数据写到队列中,然后取出队列中的第一个序列通过 dequeue 方法执行
  3. 开始执行之前写一个进程锁“inprogress”到 queue 里面,代表这个动画还在执行中,防止同个序列的多个动画重复执行,这个就是异步执行同步收集的处理方案
  4. 此时动画开始了,这里注意动画是在异步执行的同步的代码,继续调用下一个 animate
  5. 执行同样的 animate 方法逻辑但是此时问题来了,动画可能还在执行可是后续的 animate 还在继续调用,所以这个时候后面的动画代码就需要等待了(进程锁)
  6. 队列头是有一把“inprogress”进程锁的,那么这时候动画只需要加入队列,但是可以通过 inprogress 是否存在来判断是否执行
  7. 所有的 animate 方法在加入队列都是按照以上的逻辑依次执行,动画执行完毕了就会有一个结束通知,然后从 queue 取出第一个队列继续执行了,如此循环

以上是整个动画的调度一个流程,其实都是利用队列异步的空闲然后执行同步的代码,这样在处理上是没有浪费资源的,而且精确度也是最高的。

目录
相关文章
|
5月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
48 0
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
5月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
46 0
|
6月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
6月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
78 0
|
6月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
70 0
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
40 0
|
6月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
85 0
|
前端开发 JavaScript 容器