Fungsi Callback pada jQuery

Statement JavaScript dapat dijalankan baris demi baris. Tetapi, efek pada jQuery membutuhkan waktu untuk menyelesaikan baris kode berikutnya untuk dapat dijalankan saat efek sebelumnya masih berjalan. Untuk mencegah hal tersebut, jQuery menyediakan fungsi pemanggilan balik (Callback) untuk setiap metode efek.

Fungsi Callback adalah fungsi yang dijalankan setelah efeknya selesai dan dapat dilewatkan sebagai argumen ke metode efek dan biasanya muncul sebagai argumen terakhir dari suatu metode. Misalnya, penulisan dasar dari metode efek slideToggle() dengan fungsi Callback dapat ditulis seperti berikut:

$(selector).slideToggle(durasi, callback);


Pertimbangkan contoh berikut di mana kita akan menempatkan Statement slideToggle() dan alert() satu sama lain. Jika kalian mencoba kode berikut, pesan alert akan segera ditampilkan setelah kalian mengklik tombol tanpa menunggu efek toggle slide selesai:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle("slow");
            alert("Efek Slide Toggle selesai.");
        }); 
    });
</script>

Lihat kode di Github | Lihat Live Demo

Berikut adalah versi modifikasi dari contoh sebelumnya di mana kita menempatkan Statement alert() di dalam fungsi Callback untuk metode slideToggle(). Jika kalian mencoba kode berikut, pesan alart akan ditampilkan setelah efek toggle slide selesai:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle("slow", function(){
                // Kode yang dijalankan ketika efek selesai
                alert("Efek Slide Toggle selesai.");
            });
        }); 
    });
</script>

Lihat kode di Github | Lihat Live Demo

Demikian pula, kalian dapat menentukan fungsi Callback untuk metode efek jQuery lainnya seperti show(), hide(), fadeIn(), fadeOut(), animate(), dll.

Catatan: Jika metode efek telah diterapkan ke beberapa elemen, maka fungsi Callback akan dijalankan satu kali untuk setiap elemen yang dipilih, bukan sekali untuk semuanya.

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1, p").slideToggle("slow", function(){
                // Kode yang dijalankan ketika efek selesai
                alert("Efek Slide Toggle selesai.");
            });
        }); 
    });
</script>

Lihat kode di Github | Lihat Live Demo

Jika kalian mencoba kode contoh di atas dan mengeklik tombol yang telah disediakan, maka kalian akan melihat pesan alert yang sama sebanyak dua kali per elemen <h1> dan <p>.

Tulis Komentar

0 Komentar