jQuery queue()

admin發表於2017-02-21
jQuery

此方法用於獲取或設定當前匹配元素上待執行的函式佇列。

當獲取函式佇列時，如果有多個匹配元素，那麼只獲取第一個匹配元素上的佇列（儲存待執行函式的陣列）；當設定佇列時，則是對匹配元素集合中的每一個元素進行設定。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.queue([queueName ])

引數解析:

queueName:可選，佇列名稱。預設是fx，標準的動畫佇列。

jQuery1.2版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.queue([queueName ], newQueue)

引數解析:

（1）.queueName:可選，佇列名稱。預設是fx，標準的動畫佇列。

（2）.newQueue:一個替換當前列隊內容的函式陣列。

jQuery1.2版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.queue([queueName ], callback(next))

引數解析:

（1）.queueName:可選，佇列名稱。預設是fx，標準的動畫佇列。

（2）.callback(next):要新增進佇列的函式。動畫佇列下一次執行時會呼叫這個函式。next:可選，呼叫此函式可以自動執行動畫佇列的下一個函式。

jQuery1.2版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div { 
  margin:3px; 
  width:40px; 
  height:40px;
  position:absolute; 
  left:0px; 
  top:60px;
  background:green; 
  display:none;
}
div.newcolor { background:blue; }
p { color:red; }  
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
  var div = $("div");

  function runIt() {
    div.show("slow");
    div.animate({ left: '+=200' }, 2000);
    div.slideToggle(1000);
    div.slideToggle("fast");
    div.animate({ left: '-=200' }, 1500);
    div.hide("slow");
    div.show(1200);
    div.slideUp("normal", runIt);
  }

  function showIt() {
    var n = div.queue("fx");
    $("span").text(n.length);
    setTimeout(showIt, 100);
  }

  runIt();
  showIt();
})
</script>
</head>
<body>
  <p>當前佇列函式數目:<span></span></p>
  <div></div>
</body>
</html>

隨著動畫的執行，佇列中的動畫函式數目會隨之變化。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
  var $div = $("div");
  function a() { alert("a") }
  function b() { alert("b") }
  function c() { alert("c") }
  function d() { alert("d") }
  $div.queue("ant", a);
  $div.queue("ant", b);
  $div.dequeue("ant");
})
</script>
</head>
<body>
  <div></div>
</body>
</html>

div上新建佇列"ant"，並新增函式a和b，然後使用dequeue()方法可以執行並移除佇列中的第一個函式。

如果要把佇列中的函式一一執行，那麼就需要不斷的呼叫dequeue()，表繁瑣，如果我們希望動畫函式鏈式呼叫一樣，能夠自動執行，我們只需要為佇列函式傳遞一個next函式即可。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
  var $div = $("div");
  function a(next) { 
    alert("a");
    next()
  }
  function b(next) {
    alert("b");
    next()
  }
  function c(next) {
    alert("c");
    next()
  }
  function d(next) {
    alert("d");
    next()
  }
  $div.queue("ant", a);
  $div.queue("ant", b);
  $div.queue("ant", c);
  $div.queue("ant", d);
  $div.dequeue("ant");
})
</script>
</head>
<body>
  <div></div>
</body>
</html>

傳遞next函式之後，就可以自動執行佇列中下一個函式了。

相關文章