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. 第一百七十三节,jQuery,Ajax

    jQuery,Ajax 学习要点: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6 ...

  2. Python urllib的urlretrieve()函数解析 (显示下载进度)

    #!/usr/bin/python #encoding:utf-8 import urllib import os def Schedule(a,b,c): ''''' a:已经下载的数据块 b:数据 ...

  3. 嵌入式开发之davinci--- 8148/8168/8127 中的alsa音频pcm g711 和aac 音频格式

    (1)alsa pcm (2)g711 (3)aac (4) --------------author:pkf -------------------time:2-4 ---------------- ...

  4. python3----ASCII

    >>>print ord("a") 97 >>>print chr(97) a

  5. caffe net 可视化工具,,层特征可视化

    1.只用网络在线结构绘制可视化网络模型 http://ethereon.github.io/netscope/#/editor 将对应的网络输入到里面,然后按shift+enter即可查看对应的网络结 ...

  6. Qt 静态编译后的exe太大, 能够这样压缩.

    1. 下载PECompact 下载地址:http://download.csdn.net/download/sniper_bing/7669247 ,  不行大家就去baidu搜索下载就能够了这个是绿 ...

  7. php中变量引用&不可与global共同使用

    问题来源,新公司debug. 程序中代码大致如下 class Ci { private static $instance = NULL; public $name = 'hello'; public ...

  8. win10 IoT开发 Serial​Device 返回 null

    树莓派3,win10 Iot,串口开发,抄例子,串口获取返回老是null,例子却可以,代码一样,上网查询结果如下: https://stackoverflow.com/questions/341603 ...

  9. node.js 关于跨域和传递给前台参数

    /*为app添加中间件处理跨域请求*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin& ...

  10. CSS3随意记录

    1.注释 注释语法:/* 注解注释内容 */ 2.带有透明度 rgba(255,0,0,0.5);rgba(0,255,0,0.5);rgba(0,0,255,0.5); 0.5就带有透明的,介于0和 ...