jQuery 的队列是如何实现的

关注

原创最新推荐文章于 2026-03-24 00:49:30 发布 301 阅读 AI 写同款· GEO 优化 ›

探索动画与队列管理：jQuery 动画实现与控制本章深入探讨了如何使用 jQuery 创建和管理动画效果。通过实例代码展示了图像如何根据浏览器屏幕位置执行动画，以及如何在动画过程中动态改变图像的尺寸并替换为另一张图像。此外，本章还详细解释了 jQuery 队列的概念，包括如何操纵队列中的方法，以及如何通过队列实现一系列动画效果。通过队列的管理和操作，我们可以实现对动画执行顺序和时机的精确控制。阅读详情

jQuery 核心中有一组队列控制方法，由 queue()/dequeue()/clearQueue() 三个方法组成。
主要应用于 animate()，ajax，其他要按时间顺序执行的事件中

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}

// 入栈队列事件
$('#box').queue("queue1", func1);  // push func1 to queue1
$('#box').queue("queue1", func2);  // push func2 to queue1

// 替换队列事件
$('#box').queue("queue1", []);  // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);  // replace queue1

// 获取队列事件（返回一个函数数组）
$('#box').queue("queue1");  // [func3(), func4()]

// 出栈队列事件并执行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整个队列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue