$.queue 与 $.dequeue -- 队列


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、面向对象---封装文件上传思路
2、老神医,望闻问切,
3、win7下安装配置ftp服务器
4、select 不支持边框设置。要设成1象素,span 或DIV 做一个 (如下)
5、利用OpenLayers创建wkt字符串


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn