Days
Hours
Minutes
Seconds
Pada tutorial sebelumnya, kita telah banyak menggunakan efek animasi seperti slideUp() dan fadeIn(). Pernahkah kamu berpikir, “Bagaimana cara menjalankan kode setelah animasi ini selesai?” Jawabannya adalah dengan menggunakan Callback Function.
Secara sederhana, Callback Function adalah sebuah fungsi yang dieksekusi setelah fungsi lain selesai dijalankan. Dalam konteks jQuery, ini berarti sebuah fungsi yang akan dijalankan setelah animasi atau aksi tertentu (misalnya, hide(), fadeIn()) telah benar-benar selesai.
Tanpa callback, jika kamu meletakkan kode setelah animasi, kode tersebut akan langsung dijalankan tanpa menunggu animasi selesai. Ini bisa menyebabkan bug atau perilaku yang tidak terduga pada halaman web kamu.
Sebagian besar metode jQuery yang memiliki efek animasi (seperti hide(), show(), fadeIn(), slideUp(), animate()) menerima parameter opsional terakhir berupa callback function.
$(selector).hide(speed, callback);
$(selector).fadeIn(speed, callback);
Contoh Umum:
$("#tombolSembunyi").click(function(){
$("#kotak").hide("slow", function(){
alert("Kotak sudah disembunyikan!");
});
});
Dalam contoh di atas, alert() hanya akan muncul setelah animasi penyembunyian kotak (hide("slow")) selesai sepenuhnya.
Callback function sangat berguna untuk membuat serangkaian animasi yang berurutan atau berantai. Kita bisa membuat elemen muncul, lalu memudar, lalu bergeser, semuanya secara berurutan.
<!DOCTYPE html>
<html>
<head>
<title>Callback jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.kotak {
width: 100px;
height: 100px;
background-color: #FF5722;
display: none;
margin: 20px;
}
</style>
</head>
<body>
<button id="startAnimasi">Mulai Animasi Berantai</button>
<div class="kotak"></div>
<p id="status"></p>
<script>
$(document).ready(function(){
$("#startAnimasi").click(function(){
$("#status").text("Animasi dimulai...");
// Animasi Pertama: Slide Down
$(".kotak").slideDown("slow", function(){
$("#status").text("Animasi pertama selesai, mulai yang kedua...");
// Animasi Kedua: Fade Out
$(this).fadeOut("slow", function(){
$("#status").text("Animasi kedua selesai, mulai yang ketiga...");
// Animasi Ketiga: Fade In dan Ganti Warna
$(this).fadeIn("slow", function(){
$("#status").text("Semua animasi selesai!");
});
});
});
});
});
</script>
</body>
</html>
Penjelasan:
slideDown().slideDown() selesai, fungsi callback pertama akan dijalankan. Di dalamnya, kita memanggil fadeOut().fadeOut() selesai, fungsi callback kedua akan dijalankan, dan di dalamnya kita memanggil fadeIn().fadeIn() selesai, kita bisa memberikan pesan bahwa semua animasi telah selesai.
Callback tidak hanya terbatas pada animasi. Misalnya, kamu ingin menghapus elemen dari DOM setelah disembunyikan, atau mengirim data setelah form disubmit.
<!DOCTYPE html>
<html>
<head>
<title>Callback Non-Animasi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p id="elementAkanDihapus">Klik tombol di bawah ini untuk menyembunyikan saya.</p>
<button id="hapusBtn">Sembunyikan & Hapus</button>
<script>
$(document).ready(function(){
$("#hapusBtn").click(function(){
$("#elementAkanDihapus").fadeOut("slow", function(){
// Callback ini akan berjalan setelah fadeOut selesai
$(this).remove();
alert("Elemen telah dihapus dari DOM!");
});
});
});
</script>
</body>
</html>
Dalam contoh ini, metode remove() yang berfungsi menghapus elemen dari halaman, hanya akan dijalankan setelah efek fadeOut() selesai.
Callback function adalah konsep yang sangat penting dalam jQuery dan pemrograman asinkron pada umumnya. Dengan memanfaatkannya, kamu bisa mengontrol alur program dengan presisi, memastikan kode dieksekusi pada waktu yang tepat, terutama setelah efek animasi selesai. Ini akan membantu kamu membuat interaksi web yang lebih kompleks dan terorganisir.
Pada tutorial berikutnya, kita akan membahas manipulasi HTML/DOM dengan jQuery. Teruslah berlatih! ✨
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
