Kaedah queue

Kaedah queue membolehkan kita bekerja dengan barisan fungsi yang dikaitkan dengan elemen. Lihat juga kaedah clearQueue, yang membolehkan kita membuang semua fungsi dari barisan yang belum dilaksanakan.

Sintaks

Beginilah cara kita memaparkan barisan fungsi yang dilaksanakan, yang dikaitkan dengan elemen. Anda boleh menghantar nama barisan sebagai pilihan tambahan dalam bentuk rentetan (secara lalai fx - barisan kesan piawai):

.queue([nama barisan]);

Kita boleh memanipulasi barisan. Dilaksanakan sekali untuk setiap elemen. Untuk ini, anda boleh menghantar array fungsi sebagai parameter kedua, yang akan menggantikan kandungan barisan semasa:

.queue([nama barisan], barisan baharu );

Atau anda boleh menghantar fungsi callback baharu sebagai parameter kedua untuk ditambahkan ke dalam barisan. Fungsi ini pula menerima fungsi lain sebagai parameternya. Ini membolehkan item seterusnya dikeluarkan secara automatik dari barisan dan menggerakkan barisan:

.queue([nama barisan], fungsi callback(next) {
	next();
});

Setiap elemen boleh mempunyai satu atau beberapa barisan. Dalam banyak aplikasi, hanya satu (fx) digunakan. Barisan membolehkan urutan tindakan dengan elemen dilakukan secara tak segerak, tanpa mengekang pelaksanaan program. Panggilan queue dengan fungsi callback membolehkan kita meletakkan fungsi baharu di hujung barisan. Fungsi callback dilaksanakan sekali untuk setiap elemen dalam set. Apabila menambahkan fungsi menggunakan queue, kita mesti memastikan bahawa kaedah dequeue akan dipanggil kemudian, supaya fungsi seterusnya dalam rantaian berfungsi.

Contoh

Mari tambah fungsi tersuai. Pertama, selepas mengklik #animate, kami akan memaparkan segi empat merah, yang akan bergerak ke kanan selama 2s, kemudian menggunakan queue kami akan menambahkan fungsi tersuai yang akan menukar warna segi empat kepada hijau, dengan menambahkan kelas newcolor. Seperti yang anda lihat, kemudian dequeue dipanggil di sini, untuk mengeluarkan fungsi dari barisan. Kemudian segi empat kami akan bergerak ke kiri selama setengah saat dan bertukar kembali kepada merah - menggunakan fungsi tersuai kedua kami mengalih keluar kelas newcolor. Selepas animasi selesai, kami menggulung segi empat kami:

<button id="animate">mula</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();
});

Contoh

Mari tambah barisan dalam bentuk array, untuk memadam yang sebelumnya. Apabila butang #start diklik, kami akan melihat animasi dari contoh sebelumnya. Apabila butang #stop diklik, kami akan menghentikan animasi dengan menambahkan array kosong. Apabila #start diklik sekali lagi, animasi akan bermula semula:

<button id="start">mula</button>
<button id="stop">berhenti</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();
});

Lihat juga

kaedah animate,
yang menganimasikan sifat elemen
kaedah clearQueue,
yang membolehkan anda membuang semua item yang belum selesai dari barisan fungsi
kaedah dequeue,
yang membolehkan anda melaksanakan fungsi seterusnya dalam barisan fungsi