菜鸟教程 -- 学的不仅是技术,更是梦想!

  • 首页
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Bootstrap
  • Python3
  • Python2
  • Java
  • C
  • C++
  • C#
  • SQL
  • MySQL
  • PHP
  • 本地书签
  • 云服务器
  • 首页
  • HTML
  • CSS
  • JS
  • 本地书签
  • Search
jQuery 教程
jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件

jQuery 效果

jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链

jQuery HTML

jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸

jQuery 遍历

jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤

jQuery Ajax

jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法

jQuery 其他

jQuery noConflict() 方法 jQuery JSONP

jQuery 实例

jQuery 实例

jQuery 参考手册

jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性

jQuery 插件

jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Prettydate jQuery Tooltip jQuery Treeview
jQuery 效果 – 滑动
jQuery 效果 – 停止动画
jQuery 效果 – 滑动
jQuery 效果 – 停止动画

2 篇笔记 写笔记

  1. #2

       Yunhero

      239***7958@qq.com

    61

    队列操作

    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 地位类似,是一个内部使用的基础设施。

    • 当 slideUp 运行时,fadeIn 被放到 fx 队列中
    • 当 slideUp 完成后,从队列中被取出运行

    Queue 函数允许直接操作这个链式调用的行为,同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

    jQuery 提供了 2 组队列操作的 API:

    jQuery.queue/dequeue
    jQuery.fn.queue/dequeue

    但是不同与普通队列定义的是:

    • jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素,还会自动执行返回的队头元素
    • fn 是扩展在原型上的高级API是提供给实例使用的
    • .queue/.dequeue 其内部是调用的 .queue,.dequeue 静态的底层方法实现入列与出列
    Yunhero

       Yunhero

      239***7958@qq.com

    2年前 (2018-03-23)
  2. #1

       Yunhero

      239***7958@qq.com

    40
    动画调度

    对于 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 取出第一个队列继续执行了,如此循环

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

    Yunhero

       Yunhero

      239***7958@qq.com

    2年前 (2018-03-23)

点我分享笔记

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 引用地址
分类导航
  • HTML / CSS
    • HTML 教程
    • HTML5 教程
    • CSS 教程
    • CSS3 教程
    • Bootstrap3 教程
    • Bootstrap4 教程
    • Font Awesome 教程
    • Foundation 教程
  • JavaScript
    • JavaScript 教程
    • HTML DOM 教程
    • jQuery 教程
    • AngularJS 教程
    • AngularJS2 教程
    • Vue.js 教程
    • React 教程
    • TypeScript 教程
    • jQuery UI 教程
    • jQuery EasyUI 教程
    • Node.js 教程
    • AJAX 教程
    • JSON 教程
    • Echarts 教程
    • Highcharts 教程
    • Google 地图 教程
  • 服务端
    • Python 教程
    • Python2.x 教程
    • Linux 教程
    • Docker 教程
    • Ruby 教程
    • Java 教程
    • C 教程
    • C++ 教程
    • Perl 教程
    • Servlet 教程
    • JSP 教程
    • Lua 教程
    • Scala 教程
    • Go 教程
    • PHP 教程
    • Django 教程
    • 设计模式
    • 正则表达式
    • Maven 教程
    • NumPy 教程
    • ASP 教程
    • AppML 教程
    • VBScript 教程
  • 数据库
    • SQL 教程
    • Mysql 教程
    • PostgreSQL 教程
    • SQLite 教程
    • MongoDB 教程
    • Redis 教程
    • Memcached 教程
  • 移动端
    • Android 教程
    • Swift 教程
    • jQuery Mobile 教程
    • ionic 教程
    • Kotlin 教程
  • XML 教程
    • XML 教程
    • DTD 教程
    • XML DOM 教程
    • XSLT 教程
    • XPath 教程
    • XQuery 教程
    • XLink 教程
    • XPointer 教程
    • XML Schema 教程
    • XSL-FO 教程
    • SVG 教程
  • ASP.NET
    • ASP.NET 教程
    • C# 教程
    • Web Pages 教程
    • Razor 教程
    • MVC 教程
    • Web Forms 教程
  • Web Service
    • Web Service 教程
    • WSDL 教程
    • SOAP 教程
    • RSS 教程
    • RDF 教程
  • 开发工具
    • Eclipse 教程
    • Git 教程
    • Svn 教程
    • Markdown 教程
  • 网站建设
    • HTTP 教程
    • 网站建设指南
    • 浏览器信息
    • 网站主机教程
    • TCP/IP 教程
    • W3C 教程
    • 网站品质

Advertisement
-->
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· HTML ISO-8859-1
· HTML 实体符号
· HTML 拾色器
· JSON 格式化工具
最新更新
· C++ 怎样让函数...
· Python 动态变量...
· JSON vs XML
· SQL EXISTS 运算符
· HTML main 标签
· ECharts 旭日图
· ECharts 事件处理
站点信息
· 意见反馈
· 加入我们 岗位:技术类型自媒体
工作地点:厦门
具体联系邮箱:429240967@qq.com
· 免责声明
· 关于我们
· 文章归档
关注微信
Copyright © 2013-2020 菜鸟教程  runoob.com All Rights Reserved. 备案号:闽ICP备15012807号-1

微信关注

微信关注
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少
微信
支付宝

打开支付宝扫一扫,即可进行扫码打赏哦

点我查看本站打赏源码!

  • 用户登录
  • 注册新用户

忘记密码?

如何获取邀请码?

关闭