Phương thức queue

Phương thức queue cho phép chúng ta làm việc với hàng đợi các hàm được gắn vào phần tử. Xem thêm phương thức clearQueue, cho phép chúng ta xóa khỏi hàng đợi tất cả các hàm chưa được khởi chạy.

Cú pháp

Cách này hiển thị hàng đợi các hàm đang thực thi, được gắn vào phần tử. Có thể truyền tham số tùy chọn là tên hàng đợi dưới dạng chuỗi (mặc định là fx - hàng đợi hiệu ứng tiêu chuẩn):

.queue([tên hàng đợi]);

Chúng ta có thể thao tác với hàng đợi. Được thực thi một lần cho mỗi phần tử. Để làm điều này, có thể truyền tham số thứ hai là một mảng các hàm, chúng sẽ thay thế nội dung của hàng đợi hiện tại:

.queue([tên hàng đợi], hàng đợi mới );

Hoặc có thể truyền tham số thứ hai là một hàm callback mới để thêm vào hàng đợi. Hàm này lần lượt nhận một hàm khác làm tham số. Điều này cho phép tự động loại bỏ phần tử tiếp theo khỏi hàng đợi và di chuyển hàng đợi:

.queue([tên hàng đợi], hàm callback(next) {
	next();
});

Mỗi phần tử có thể có một hoặc nhiều hàng đợi. Trong nhiều ứng dụng chỉ sử dụng một (fx). Các hàng đợi cho phép thực hiện chuỗi hành động với phần tử một cách không đồng bộ, mà không làm gián đoạn việc thực thi chương trình. Lời gọi queue với hàm callback cho phép chúng ta đặt một hàm mới vào cuối hàng đợi. Hàm callback được thực thi một lần cho mỗi phần tử trong tập hợp. Khi thêm hàm bằng queue, chúng ta phải đảm bảo rằng sau đó phương thức dequeue sẽ được gọi, để hàm tiếp theo trong chuỗi hoạt động.

Ví dụ

Hãy thêm một hàm tùy chỉnh. Đầu tiên, sau khi nhấp vào #animate, chúng ta sẽ hiển thị hình vuông màu đỏ, nó sẽ di chuyển sang phải trong 2 giây, sau đó sử dụng queue chúng ta sẽ thêm một hàm tùy chỉnh, đổi màu hình vuông thành xanh lá, bằng cách thêm lớp newcolor. Như bạn thấy, sau đó ở đây gọi dequeue, để loại bỏ hàm khỏi hàng đợi. Sau đó hình vuông của chúng ta sẽ di chuyển sang trái nửa giây và đổi màu trở lại thành đỏ - bằng cách sử dụng hàm tùy chỉnh thứ hai chúng ta loại bỏ lớp newcolor. Khi hoàn thành hoạt ảnh, chúng ta thu gọn hình vuông của mình:

<button id="animate">bắt đầu</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

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

Ví dụ

Hãy thêm một hàng đợi dưới dạng mảng, để xóa hàng đợi trước đó. Khi nhấp vào nút #start chúng ta sẽ thấy hoạt ảnh từ ví dụ trước. Khi nhấp vào nút #stop chúng ta sẽ dừng hoạt ảnh bằng cách thêm một mảng rỗng. Khi nhấp lại vào #start hoạt ảnh sẽ bắt đầu lại từ đầu:

<button id="start">bắt đầu</button>
<button id="stop">dừng</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}
div.newcolor {
	background: green;
}

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

Xem thêm

phương thức animate,
tạo hoạt ảnh cho các thuộc tính của phần tử
phương thức clearQueue,
cho phép xóa tất cả các phần tử chưa thực thi khỏi hàng đợi các hàm
phương thức dequeue,
cho phép thực thi hàm tiếp theo trong hàng đợi các hàm