jQuery 的队列是如何实现的?队列可以用在哪些地方?

🌙
手机阅读
本文目录结构

jQuery 的队列是如何实现的?队列可以用在哪些地方?

jQuery 核心中,有一组队列控制方法,这组方法由 queue()/dequeue()/clearQueue() 三个方法组成,它对需要连续按序执行的函数的控制可以说是简明自如,主要应用于 animate () 方法,ajax 以及其他要按时间顺序执行的事件中。

先解释一下这组方法各自的含义。

queue(name,[callback]): 当只传入一个参数时,它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是 fx); 当有两个参数传入时,第一个参数还是默认为 fx 的的队列名,第二个参数又分两种情况,当第二个参数是一个函数时,它将在匹配的元素的队列最后添加一个函数。当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组). 可能,这个理解起来有点晕。

dequeue(name): 这个好理解,就是从队列最前端移除一个队列函数,并执行它。

clearQueue([queueName]): 这是 1.4 新增的方法。清空对象上尚未执行的所有队列。参数可选,默认为 fx. 但个人觉得这个方法没多大用,用 queue() 方法传入两个参数的第二种参数即可实现 clearQueue 方法。

现在,我们要实现这样一个效果,有标有 1 至 7 的数字方块,要求这七个方块自左到右依次下落;写好以后

;如果此时,你想调换一个某个的执行顺序,比如,你想让 5 落下后再开始下落 3, 或者新加 8 至 15 八个方块,怎么办?

重写吗?在里面小心冀冀的改吗?显然,我们需要另外一种列简明便捷的方法来实现这个效果,那就是 jQuery 队列控制方法。;

这样一来,看起来是不是简明多了。如何实现?

  1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
  2. 用 queue 将这组动画函数数组加入到 slideList 队列中;
  3. 用 dequeue 取出 slideList 队列中第一个函数,并执行它;
  4. 初始执行第一个函数。

至于 clearQueue() 方法,就不多说了,演示中停止按钮调用的就是 clearQueue() 方法,当然你还可以用 queue() 方法直接将现在的函数列队替换成 [] 空数组实现(个人比较推荐空数组替换。, 更直观).

更多面试题

如果你想了解更多的前端面试题,请点击下面进行选择,这里基本包涵了市场上的所有前端方面的面试题,让你面试更加顺利。

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了