jQuery.queue

1、"fx"是什么？

队列动画的默认名称

队列的名字为type + "queue"，默认是"fxqueue"

2、队列存储于内部jQuery._data的内部数据上

3、如果传递了数据,则直接合并到现有的数据里面

4、最后返回了一个数组

jQuery.dequeue

1、会推出队列的第一个函数，以便后面进行执行

2、同时会用当前的type名称存储一个hooks，作为最后清理data的函数，并作为每次执行时的第三个参数，这里不明白的是为什么要用Callbacks，是出于什么考虑呢？

3、并保存一个函数next，里面是出队下一函数的执行逻辑，作为执行时的第二个函数，jquery在函数执行时传入next和hooks是出于什么考虑？

4、如果是默认的fx队列，则需要再出队一次，并把开始位置减一

5、如果有出队函数，并且为fx队列，则推入"inprogress"字符串，来防止fx队列被自动出队（这里没看懂），这里折腾这一步是为了什么

6、然后删除hooks的stop函数，这里也没看懂。。。，hooks是Callback对象，哪里来的stop函数？

7、长度为0以后，调用hooks的fire函数做最后的清理

jQuery._queueHooks

1、key = type + "queueHooks";

2、如果有key对应的数据，则直接返回

如果没有，则存入一个对象

　　{

　　　　"empty": 一个Callback对象，会把key和type对应的数据全部删除

　　}

.queue

1、第一步根据type的类型来修正type的名称，如果不是字符串，则自动修复成fx

2、如果只传入了type，则直接返回$.queue定义队列

3、如果传入了空字符串，并传入了null的data，则直接把元素返回

4、如果传入的type不是字符串，则把data修正为type

5、如果传入了符合规则的type和data，则遍历元素，把每一个元素都入队对应的type和data

6、并保证每个元素都有一个hooks，这里没看懂，这么做是为什么？

7、如果为fx队列，并且为inprogress，则直接出队

.dequeue

就是遍历元素调用jQuery.dequeue方法

.promise

这是一个队列观察者函数，它监听着每个匹配元素的某一类型的队列的完成情况

<div class="wrapper">

    <img src="./img/side1.jpg" />

</div>

<script>

    !function($){

        var img = $("img");

        img.queue("test", function(){

            console.log(1);

        });

        img.dequeue("test");

        //img.dequeue("test");

        img.promise("test").done( function () {

            console.log("success");//这里不会输出 success，再把上面的注释去掉试试吧~

        });

    }(jQuery);

</script>

造成这个的原因，是因为 promise 源码中的计数器是从1开始的，为什么这么设计呢？我也不知道。。。

不过从这里和之前的代码也可以看出，queue 的这一部分主要是为 jQuery 的动画服务的，它的很多逻辑都是与 jQuery 的动画逻辑耦合的，所以 queue 这一部分其实并不适合我们在业务逻辑中单独使用

.promise()源码片段：

// Get a promise resolved when queues of a certain type

// are emptied (fx is the type by default)

promise: function( type, obj ) {

    var tmp,

        count = 1,//计数器从1开始

        defer = jQuery.Deferred(),//新的deferred对象

        elements = this,//当前的元素

        i = this.length,

        resolve = function() {

            if ( !( --count ) ) {

                defer.resolveWith( elements, [ elements ] );

            }

        };

    if ( typeof type !== "string" ) {

        obj = type;

        type = undefined;

    }

    type = type || "fx";//这里的处理逻辑与前面是一样的

    while ( i-- ) {

        tmp = jQuery._data( elements[ i ], type + "queueHooks" );

        if ( tmp && tmp.empty ) {

            count++;

            tmp.empty.add( resolve );

        }

    }

    resolve();

    return defer.promise( obj );//合并传入进来的对象

}

deferred.promise()相关的片段

// Get a promise for this deferred

// If obj is provided, the promise aspect is added to the object

promise: function( obj ) {

    return obj != null ? jQuery.extend( obj, promise ) : promise;

}

再看一个 jQuery 官网给的例子

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>promise demo</title>

  <style>

  div {

    height: 50px;

    width: 50px;

    float: left;

    margin-right: 10px;

    display: none;

    background-color: #090;

  }

  </style>

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

<button>Go</button>

<p>Ready...</p>

<div></div>

<div></div>

<div></div>

<div></div>

<script>

$( "button" ).on( "click", function() {

  $( "p" ).append( "Started..." );

  $( "div" ).each(function( i ) {

    $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );

  });

  $( "div" ).promise().done(function() {

    $( "p" ).append( " Finished! " );

  });

});

</script>

</body>

</html>

结果展示：http://jsfiddle.net/oh6e0uk3/

jQuery队列操作的更多相关文章

  1. jquery源码解析：jQuery队列操作queue方法实现的原理

    我们先来看一下jQuery中有关队列操作的方法集: 从上图可以看出,既有静态方法,又有实例方法.queue方法,相当于数组中的push操作.dequeue相当于数组的shift操作.举个例子: fun ...

  2. jQuery源码分析系列(38) : 队列操作

    Queue队列,如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施 Queue队列是animate动画依赖的基础设施,整个jQuery中队列仅供给动画使用 Qu ...

  3. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  4. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

  5. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  6. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  7. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  8. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  9. LabVIEW之生产者/消费者模式--队列操作 彭会锋

    LabVIEW之生产者/消费者模式--队列操作 彭会锋 本文章主要是对学习LabVIEW之生产者/消费者模式的学习笔记,其中涉及到同步控制技术-队列.事件.状态机.生产者-消费者模式,这几种技术在在本 ...

随机推荐

  1. linux内核分析作业：以一简单C程序为例，分析汇编代码理解计算机如何工作

    一.实验 使用gcc –S –o main.s main.c -m32 命令编译成汇编代码,如下代码中的数字请自行修改以防与他人雷同 int g(int x) { return x + 3; } in ...

  2. Ubuntu apt-get "Hash Sum mismatch" 问题解决方法

    参考:ubuntu: apt-get update的时候遇到"Hash Sum mismatch"错误 在安装Mininet的时候,apt-get update的时候遇到了这个问题 ...

  3. 读书笔记：const和readonly、static readonly 那些事

    C#中表示不变的量(常量)的两种形式:const 和readonly const 是静态常量 readonly 是动态常量 严格的来讲:const 应该称为常量 而readonly 则应称为只读变量. ...

  4. Windows 7 IE主页被篡改，如何修复？

    有时我们的电脑会因为病毒的入侵,使得IE主页被篡改,然后就会被没底线的广告包围,有时用杀毒软件也不修复,那么此时应该怎么修复呢?其实很简单,只需几步,就可以让您的电脑重新清净下来. 第一步 点击“开始 ...

  5. 解决Win10图片打开方式没有“Windows照片查看器”问题

    1.打开注册表编辑器(Win+R,Regedit),定位至(建议修改前备份注册表): HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows Photo Viewe ...

  6. 合并多个工作薄workbooks到一个工作薄workbook

    微软示例教程 微软示例教程 Sub MergeAllWorkbooks() Dim SummarySheet As Worksheet Dim FolderPath As String Dim NRo ...

  7. 尚德,国美 interview summary

    尚德 Q:SDWebimage源代码,cell重用.先请求出来小头像,再请求出大头像?怎么处理? SDWebImageDownloader 直接给cell设置图片会怎样 A:图片URL相同,比较nsd ...

  8. adv钓鱼题

    4 10 4 5 6 2 10 2 10 4 5 6 2 10 2 60 1 20 29 20 50 20 60 1 20 20 20 60 20 #include<iostream> u ...

  9. notepad++快捷键大全

    Ctrl+C 复制 Ctrl+X 剪切 Ctrl+V 粘贴 Ctrl+Z 撤消 Ctrl+Y 恢复 Ctrl+A 全选 Ctrl+F 键查找对话框启动 Ctrl+H 查找/替换对话框 Ctrl+D 复 ...

  10. 快速原型设计工具-Axure RP的介绍及简单使用（生产初期向客户展示设计产品的原型-也就是展示产品）

    啧啧~~ 给大家介绍一款超棒的原型设计工具--美国Axure Software Solution公司旗舰产品Axure RP 这款工具通俗的说呢,就是在项目整体需求考察后对整体设计一个简要性概括!设计 ...