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

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

Mô hình

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

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 công việc các hàm được thực hiện trên các phần tử khớp.

Cú pháp

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

Thực hiện hàng công việc

Phương thức queue() thực hiện hàng công việc các hàm được thực hiện trên các phần 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 chuỗi. Mặc định là fx, chuỗi hiệu ứng tiêu chuẩn.

Giải thích chi tiết

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

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

Khi câu lệnh này được thực hiện, phần tử sẽ bắt đầu động hình 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 động hình 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 trên hàng đợi này. Gọi phương thức .queue() có phản hồi đặ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 phản hồi của phương pháp động hình, nhưng không cần thiết lập hàm phản hồi khi thực hiện động hình.

$('#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