Data jQuery - Metode jQuery.queue()

Referensi Manual Data jQuery

Contoh

Tampilkan panjang antrian:

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

Coba sendiri

Definisi dan penggunaan

Metode queue() menampilkan atau mengoperasikan antrian fungsi yang dieksekusi di atas elemen yang cocok.

Keterangan:Ini adalah metode tingkat dasar; digunakan .queue() Lebih mudah.

Sintaks

.queue(queueName)
Parameter Deskripsi
queueName Pilihan. Nilai string yang mengandung nama urutan. Default adalah fx, urutan efek standar.

Operasikan antrian

Metode queue() mengoperasikan antrian fungsi yang dieksekusi di atas elemen yang cocok.

Sintaks

.queue(queueName,newQueue)
Parameter Deskripsi
queueName Pilihan. Nilai string yang mengandung nama urutan. Default adalah fx, urutan efek standar.

Penjelasan detil

Setiap elemen dapat memiliki satu hingga beberapa antrian fungsi yang ditambahkan oleh jQuery. Pada sebagian besar aplikasi, hanya menggunakan antrian satu (dengan nama fx). Antrian menjalankan serangkaian aksi di atas elemen secara asinkronus, tanpa menghentikan eksekusi program. Contoh yang biasa adalah pemanggilan beberapa metode animasi di atas elemen. Contohnya:

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

Ketika pernyataan ini dijalankan, elemen akan segera memulai animasi penyeretan, tetapi transisi pencahayaan ditempatkan di antrian fx, dan hanya akan dipanggil setelah penyeretan selesai.

Metode .queue() memungkinkan kami untuk operasikan langsung terhadap antrian fungsi ini. Penggunaan .queue() dengan callback sangat berguna; ini memungkinkan kami menempatkan fungsi baru di akhir antrian.

Fitur ini mirip dengan fungsi callback yang disediakan oleh metode animasi, tetapi tanpa perlu mengatur fungsi callback saat animasi dijalankan.

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

Sama dengan:

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

Perhatikan, ketika menambahkan fungsi melalui .queue(), pastikan akhirnya dipanggil .dequeue() untuk memastikan bahwa fungsi berikutnya dalam antrian dapat dijalankan.

Contoh 1

Lakukan operasi antrian untuk fungsi kustom:

$("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();
);

Coba sendiri

Contoh 2

Atur daftar antrian untuk menghapus antrian:

$("#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();
);

Coba sendiri

Referensi Manual Data jQuery