jQuery核心--队列控制

数据缓存

函数列表

函数	说明
queue()	用于获取或设置当前匹配元素上待执行的函数队列。
dequeue()	用于移除每个匹配元素的指定队列中的第一个函数，并执行被移除的函数。
clearQueue()	用于清空每个匹配元素的指定队列中所有尚未执行的项。

函数说明

queue()

queue()函数用于获取或设置当前匹配元素上待执行的函数队列。

如果当前jQuery对象匹配多个元素：获取队列时，只获取第一个匹配元素上的队列；设置队列(替换队列、追加函数)时，则为每个匹配元素都分别进行设置。

该函数属于jQuery对象(实例)。如果需要移除并执行队列中的第一个函数，请使用dequeue()函数。你也可以使用clearQueue()函数清空指定的队列。

语法

jQuery 1.2 新增该函数

• jQueryObject.queue( [ queueName ] [, newQueue ] )
  如果没有指定任何参数或只指定了queueName参数，则表示获取指定名称的函数队列。
  如果指定了newQueue参数，则表示使用新的队列newQueue设置(替换)当前队列中的所有内容。
• jQueryObject.queue( [ queueName ,] callback )
  将指定的函数添加到指定的队列(末尾)。

注意：queue()函数的所有设置操作针对当前jQuery对象所匹配的每一个元素；所有读取操作只针对第一个匹配的元素。

参数说明

参数	说明
queueName	可选/String类型 指定的队列名称，默认为”fx”(表示jQuery中的标准动画效果队列)。
newQueue	可选/Array类型 用于替换当前队列内容的新队列。
callback	Function类型 指定的函数，将会追加到队列中。该函数有一个函数参数，调用该参数可以移除并执行队列中的第一个函数。

返回值

queue()函数的返回值是Array/jQuery类型，返回值的类型取决于当前queue()函数执行的是获取操作还是设置操作。

如果queue()函数执行的是设置操作(替换队列、追加函数)，则返回当前jQuery对象本身；如果是获取操作，则返回获取到的函数队列(数组)。

如果当前jQuery对象匹配多个元素，读取数据时，queue()函数只以其中第一个匹配的元素为准。

示例&说明

HTML代码：

<div id="n1" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n2" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n3" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>

JQuery代码：

var $divs = $("div");

// 为每个div元素上的队列"q"设置(替换成)新的队列
// (由于之前没有队列"q",这相当于新增一个对列"q")
$divs.queue("q", [
    function(next){ alert("队列函数1"); /* next(); 调用该函数可以移除并执行当前队列中的第一个函数 */ } ,
    function(next){ alert("队列函数2"); } ,
    function(next){ alert("队列函数3"); }
]);

var queue = $divs.queue("q"); // 获取第一个div元素的队列"q"
var queue1 = $("#n1").queue("q");
var queue2 = $("#n2").queue("q");//获取的为函数队列
var queue3 = $("#n3").queue("q");
document.writeln( queue === queue1 ); // true

//？？获取到的都是函数队列，类型应该是相同的？为什么返回false
//解答：
document.writeln( queue === queue2 ); // false
document.writeln( queue === queue3 ); // false

document.writeln( queue.length ); // 3

// 为n1的队列"q"的末尾添加一个处理函数
$("#n1").queue("q", function(){
    // 这里的this表示当前DOM元素(n1)
    alert("队列函数4"); 
});

document.writeln( queue.length ); // 4

// 使用dequeue()可以移除并执行队列中的第一个函数
$("#n1").dequeue("q"); // 弹出对话框："队列函数1"

也可以不指定queueName参数，该参数的默认值为”fx”，表示jQuery默认的效果队列:

var $divs = $("div");

// 为每个div元素设置两个自定义动画
$divs.animate( {width: 400, height: 200}, 1000 )
.animate( {width: 200, height: 100 }, 1000 );

var fx = $divs.queue(); // 相当于：var fx = $divs.queue("fx");
document.writeln( fx.length ); // 2
document.writeln( fx[0] + '<br>'); // "inprogress"(第一个动画函数已被移除并开始执行，所以在队列开头添加该字符串来表示，如果执行完成，将开始移除并执行第二个动画函数)
document.writeln( fx[1] ); // 第二个动画的执行函数

// 用一个空的数组替换当前动画队列，即可清空动画队列
// 此时第一个动画函数已经从队列中移除、正在执行
// 因此第一个动画函数执行完毕后，就不会执行第二个动画函数(被清空了)
//??用一个空的数组替换当前动画队列函数调用在最后为什么第二个动画没执行？？
//解答：animate动画是延迟1000 ms才执行，因此，此时$divs.queue( [ ] )已经执行
$divs.queue( [ ] );

---

dequeue()

dequeue()函数用于移除每个匹配元素的指定队列中的第一个函数，并执行被移除的函数。

该函数属于jQuery对象(实例)。你也可以使用clearQueue()函数清空指定的队列(不会执行其中的函数)。

语法

• jQueryObject.dequeue([dequeueName] )

jQuery 1.2 新增该函数。

参数说明

参数	说明
dequeueName	可选/String类型 指定的队列名称，默认为”fx”(表示jQuery中的标准动画效果队列)。

返回值

dequeue()函数的返回值是jQuery类型，返回当前jQuery对象本身。。

示例&说明

HTML代码：

<input id="btn" type="button" value="执行队列" />
<div id="n1" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n2" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n3" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>

JQuery代码：

var $divs = $("div");

//为每个div元素上的队列"q"设置(替换成)新的队列
//(由于之前没有队列"q",这相当于新增一个对垒"q")
$divs.queue("q", [
    function( next ){
     alert("队列函数1"); 
     // 自动移除并调用下一个函数
     $(this).dequeue("q");//会移除当前元素q队列中的所有函数 
     } 
    function( next ){ alert("队列函数2"); $(this).dequeue("q"); } ,
    function( next ){ alert("队列函数3"); $(this).dequeue("q"); }
]);

$("#btn").click( function(){
    // 第一次点击，一共会弹出9次对话框，因为有3个div元素，每个div都有一个包含3个函数的队列
    // 之后点击该按钮，不再弹出对话框，因为队列中没有函数了
    $divs.dequeue("q");
} );

可以不指定dequeueName参数，该参数的默认值为”fx”，表示jQuery默认的效果队列：

var $divs = $("div");

$("#btn").click(function(){
    if( this.value == "开始执行" ){
        // 为每个div元素设置两个自定义动画
        $divs.animate( {width: 400, height: 200}, 1000 )
        .queue( function(){
            alert("暂停执行");
            $("#btn").val( "继续执行" );
        } )
        .animate( {width: 200, height: 100 }, 1000 );
    }else{
        $divs.dequeue( );
        $("#btn").val( "开始执行" );
    }
});

---

clearQueue()

clearQueue()函数用于清空每个匹配元素的指定队列中所有尚未执行的项。

该函数属于jQuery对象(实例)。

语法

• jQueryObject.clearQueue([queueName ] )

jQuery 1.4 新增该函数。

参数说明

参数	说明
queueName	可选/String类型 指定的队列名称，默认为”fx”(表示jQuery中的标准动画效果队列)。

返回值

clearQueue()函数的返回值是jQuery类型，返回当前jQuery对象本身。。

示例&说明

HTML代码：

<input id="start" type="button" value="开始队列" />
<input id="stop" type="button" value="清空队列" />
<div id="n1" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n2" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
<div id="n3" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>

JQuery代码：

var $divs = $("div");

$("#start").click(function(){
    // 为每个div元素设置3个自定义动画
    $divs.animate( {width: 400, height: 200}, 1000 )
    .animate( { width: 800, height: 400 }, 1000 )
    .animate( { width: 200, height: 100 }, 2000 );
});

$("#stop").click(function(){
    // 清空默认的动画队列
    // 队列中所有尚未执行的函数都将被清空
    $divs.clearQueue();
});