jQuery : Callback

Fungsi Callback jQuery

Pernyataan JavaScript dieksekusi baris demi baris. Tapi, karena efek jQuery membutuhkan waktu untuk menyelesaikan kode baris berikutnya akan dieksekusi saat efek sebelumnya masih berjalan. Untuk mencegah hal ini terjadi, jQuery menyediakan callback function untuk setiap metode efek.

Callback function adalah fungsi yang dieksekusi setelah efeknya selesai. Callback function diteruskan sebagai argumen ke metode efek dan mereka biasanya muncul sebagai argumen terakhir dari metode. Misalnya, sintaks dasar metode efek jQuery slideToggle() dengan callback function dapat diberikan dengan:

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

Dan, inilah versi modifikasi dari contoh sebelumnya di mana kita telah menempatkan pernyataan alert() di dalam callback function pada metode slideToggle(). Jika kalian mencoba kode ini, pesan peringatan akan ditampilkan setelah efek slide toggle selesai.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

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

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Jika kalian mencoba kode contoh di atas, itu akan menampilkan pesan peringatan yang sama dua kali per elemen <h1> dan <p>, setelah mengklik tombol pemicunya.