$.queue() 与 $.dequeue() -- 队列

时间：2022-11-22 23:49:27

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. iOS10-- snapshotViewAfterScreenUpdates 失效

    如果snapshotViewAfterScreenUpdates失效, 用这个方法替代, 不过要自己创建ImageView 替代方式: - (UIImage *)imageFromView:(UIVi ...

  2. LoadRunner参数化详解(转)

    距离上次使用loadrunner 已经有一年多的时间了.初做测试时在项目中用过,后面项目中用不到,自己把重点放在了工具之外的东西上,认为性能测试不仅仅是会用工具,最近又想有一把好的利器毕竟可以帮助自己 ...

  3. SQL server聚合函数、数学函数、字符串函数

    一.基础语句 二.数学函数与字符串函数 三.练习 1.创建一个学生信息表,根据要求写出程序 2.新建一个超市表,进了十种商品,个数都是十件

  4. XML IList<T> TO DataSet TO DataTable 相互转换

    //遍历XML 获得 DataSet //XmlTextReader static void Main(string[] args) { string xmlData = @"D:\stud ...

  5. CString Format 乱码问题

    CString m_buf;CStatic *m_static;char *szName;...m_buf.Format(":%s",szName);m_static->Se ...

  6. Thrift序列化与反序列化的实现机制分析

    Thrift是如何实现序死化与反序列化的,在IDL文件中,更改IDL文件中的变量序号或者［使用默认序号的情况下,新增变量时,将新增的变量不放在IDL文件的结尾,均会导致Thrift文件的反序列后无法做 ...

  7. 关于github 0.6.2版本的使用方法

    貌似做为一名前端开发人员,没听过使用过github,node,vue就像落伍一样,本人也是在前端自摸自爬的路上越走越远了,经常在群里听大神们讨论vue,github,node,好生羡慕,没人教,没人带 ...

  8. js md5 中文

    最近手机端通过js对请求数据加密,发现针对中文加密的结果和asp.net的webapi加密结果不一致 网上搜索了一下,发现以下js可用 function md5(string) { var x = A ...

  9. 清理tomcat服务器缓存

    据悉,2014年最流行的应用服务器排行榜揭晓Tomcat仍然处于领先位置.41%的部署使用的是Tomcat,和2013年的43%的市场份额数据一 致.下面还是我们的热门选择Jetty和JBoss/Wi ...

  10. hbase使用MapReduce操作2（微博表实现）

    package com.yjsj.weibo; import java.io.IOException; import java.util.ArrayList; import java.util.Ite ...

相关文章