JQuery 运用队列为动画模块服务,但好像它应该有更多用处,我觉得的,那试试就知道咯。

简单的来讲,它就是形成队列和出列,

也就因此可以进行很有规律的回调和延时了呀(暂停感觉有难度),当然这就是后面的事了,先来看看队列怎么玩吧。

function fn1() {console.log(1)}
function fn2() {console.log(2)}
function fn3() {console.log(3)} var elem = $('div')[0];
$.queue(elem, 'xxxx', fn1);
$.queue(elem, 'xxxx', fn2);
$.queue(elem, 'xxxx', fn3); // 每2秒调用一次$.dequeue,依次输出1,2,3
var Timer = setInterval(function() {
if($.queue(elem, 'xxxx').length > 0) {
$.dequeue(elem, 'xxxx')
} else {
clearTimeout(Timer);
}
}, 500);

可以看出,$.queue() 既是 setter 也是 getter(返回的是个数组)

另外值得一提的是,fn1 的参数问题,有点小奇怪,看一看就知道了

而至于 hooks,是 $.callback() 的一个小案例,也是个很好用的工具,以后会再开一章来进行分析学习。

// next(); 就能直接运行队列的下一个咯
function fn1(next, hooks) {console.log(1); next();}
function fn2(next, hooks) {console.log(2); next();}
function fn3(next, hooks) {console.log(3); next();}
var elem = $('div')[0];
$.queue(elem, 'xxxx', [fn1, fn2, fn3]);
$.dequeue(elem, 'xxxx');

$.queue() 也可以弄出 $.fn.queue() 这是很容易理解的,$.queue(elem, name, fnArr) 就等于 $(elem).queue(name, fnArr) 咯。

JQuery 动画队列的 name 是 “fx”,那我们是不是也可以来模拟一个类似的队列呢,比如插件 jquery.transit 的应用,原理如下(真TM拙劣 (ಥ_ಥ) )。

function fadeIn(next) {$(this).addClass('fadeIn').on('transitionend', next);}
function scale(next) {$(this).addClass('scale').on('transitionend', next);}
$('div').queue('transit', [fadeIn, scale]);
$('div').dequeue('transit');

同理,我们还能做出更多有点队列的栗子,回调地狱虽然可怕,但也可以写得很美的说(Promise 神马还没开始研究)

load('url', 'url');
function load() {
for(var a in arguments) {
$('div').queue('load', function(next){
_load(url, next);
});
}
function _load(url, next) {
$.post(url, function(){next();});
}
}

  

接着是 $.fn.delay(duration, queueName),很容易理解吧(不过好像试了下只能在加入队列时添加延时,而不能在队列函数内部书写)

同理,$.fn.delay(queueName, ifClearQueue, ifJumpToEnd) 也很方便理解(虽然确实可以暂停,但延时并未计算在内,也不像动画那种中途暂停,还有待研究)

(注意:上面两者是 $.fn 而不是 $. 哟,当不输入参数 queueName 时,默认是 'fx' 即动画队列。)

function fn1(next) {console.log(1);next();}
function fn2(next) {console.log(2);next();}
function fn3(next) {console.log(3);next();} var elem = $('div')[0];
$.queue(elem, 'xxxx', fn1);
$(elem).delay(1000,'xxxx');
$.queue(elem, 'xxxx', fn2);
$(elem).delay(1000, 'xxxx');
$.queue(elem, 'xxxx', fn3); $.dequeue(elem, 'xxxx'); setTimeout(function(){
$(elem).stop(true, true);
}, 1500);

  

就酱紫,队列真的是个很棒的概念,但队列的操作还不够完善,咱们拭目以待

随机推荐

  1. JS方法代理

    作者:Jiang, Jilin JS作为一门脚本语言.十分easy上手.外加其灵活性,能够轻而易举地扩展功能.今天,我们就聊聊JS的方法代理. 方法代理是脚本语言中常见的方法扩展形式.这样的灵活的形式 ...

  2. golang解析json

    解析json,在很多语言都是很常用的,go提供了相应的包"encoding/json"来处理.直接上代码,如下: package main import ( "encod ...

  3. 谈谈 epmd

    在<Erlang/OTP 并发编程实战>中,对 epmd 有如下描述: epmd  代表 Erlang 端口映射守护进程(Erlang Port Mapper Daemon). 每启动一个 ...

  4. OpenCV中的SURF算法介绍

    SURF:speed up robust feature,翻译为快速鲁棒特征.首先就其中涉及到的特征点和描述符做一些简单的介绍: 特征点和描述符 特征点分为两类:狭义特征点和广义特征点.狭义特征点的位 ...

  5. 模式识别之概率分布---平均分布,正态分布,一阶滑动和,一阶线性回归 C语言编程

    http://wenku.baidu.com/view/11cb1669a98271fe910ef9c6.html

  6. asp.net中TextBox只能输入数字的最简洁的两种方法

    如下TextBox <asp:textboxonkeypress="isnum()"id="TextBox1"runat="server&quo ...

  7. java微信开发API解析(四)-自己定义菜单以及个性化菜单实现

    全局说明 * 具体说明请參考前两篇文章. 本文说明 *本文分为五部分: * 工具类AccessTokenUtils的封装 * 自己定义菜单和个性化菜单文档的阅读解析 * 菜单JSON的分析以及构建相应 ...

  8. 转:: 刺鸟:用python来开发webgame服务端(1)

    来源:http://ciniao.me/article.php?id=9 --------------- 刺鸟原创文章,转载请注明出处    在开始之前,先简单描述一下项目的特点:我要实现的是一个mm ...

  9. [Spring Data Repositories]学习笔记--使用现有的repository

    以下内容是在学习Spring-Data-mongoDB中的Spring Data Repositories时做的一些笔记.备忘! 感觉学习还是看官方的资料比较透彻一些. Spring Data Rep ...

  10. SharePoint服务器端对象模型 之 访问网站和列表数据(Part 1)

    本节将会介绍SharePoint中最为常用的一些对象模型,以及如何使用这些对象模型来访问和操作网站中的数据.几乎所有的SharePoint服务器端开发都会涉及到这些内容,因此应着重掌握本节中所介绍的基 ...