jQuery dữ liệu - Phương thức jQuery.queue()

Hướng dẫn tham khảo dữ liệu jQuery

Ví dụ

Hiển thị độ dài hàng đợi:

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

Thử ngay

Định nghĩa và cách sử dụng

Phương thức queue() hiển thị hoặc thực hiện hàng đợi hàm được thực thi trên các yếu tố khớp.

Chú ý:Đây là phương thức cốt lõi; sử dụng .queue() Dễ dàng hơn.

Cú pháp

.queue(queueName)
Tham số Mô tả
queueName Tùy chọn. Giá trị chuỗi chứa tên của trình tự. Mặc định là fx, trình tự hiệu ứng tiêu chuẩn.

Thực hiện hàng đợi

Phương thức queue() thực hiện hàng đợi hàm được thực thi trên các yếu tố khớp.

Cú pháp

.queue(queueName,newQueue)
Tham số Mô tả
queueName Tùy chọn. Giá trị chuỗi chứa tên của trình tự. Mặc định là fx, trình tự hiệu ứng tiêu chuẩn.

Giải thích chi tiết

Mỗi yếu tố đều có thể có một đến nhiều hàng đợi hàm được jQuery thêm vào. Trong hầu hết các ứng dụng, chỉ sử dụng một hàng đợi (được gọi là fx). Hàng đợi chạy đồng bộ các hành động theo trình tự trên yếu tố mà không ngừng chương trình thực thi. Ví dụ điển hình là gọi nhiều phương pháp động trên yếu tố. Ví dụ:

$('#foo').slideUp().fadeIn();

Khi câu lệnh này được thực thi, phần tử sẽ bắt đầu animation trượt ngay lập tức, nhưng hiệu ứng mờ vào được đặt trong hàng đợi fx, chỉ được gọi sau khi animation trượt hoàn thành.

Phương thức .queue() cho phép chúng ta trực tiếp thực hiện các thao tác đối với hàng đợi này. Gọi phương thức .queue() có hàm回调 đặc biệt hữu ích; nó cho phép chúng ta đặt một hàm mới ở cuối hàng đợi.

Tính năng này tương tự như hàm回调 của phương pháp animation, nhưng không cần thiết lập hàm回调 trong quá trình animation.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $("this").dequeue();
});;

Tương đương với:

$('#foo').slideUp(function() {
  alert('Animation complete.');
);

Lưu ý rằng khi thêm hàm thông qua .queue(), chúng ta nên đảm bảo rằng cuối cùng đã gọi .dequeue(), để hàm tiếp theo trong hàng đợi có thể được thực thi.

Ví dụ 1

Thực hiện các thao tác hàng đợi đối với hàm tùy chỉnh:

$("document.body").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $("this").addClass("newcolor");
    $("this").dequeue();
  });;
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $("this").removeClass("newcolor");
    $("this").dequeue();
  });;
  $("div").slideUp();
);

Thử ngay

Ví dụ 2

Đặt mảng hàng đợi để xóa hàng đợi:

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $("this").addClass("newcolor");
    $("this").dequeue();
  );
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $("this").removeClass("newcolor");
    $("this").dequeue();
  );
  $("div").slideUp();
);
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
);

Thử ngay

Hướng dẫn tham khảo dữ liệu jQuery