Favorit semua orang: waktu video konsep! Callback adalah konsep penting dalam JavaScript. Mereka adalah fungsi yang dipanggil ketika tindakan telah selesai dijalankan. Kemudian berikan struktur dan waktu ke kode kita.
Ambil contoh animasi yang kami gunakan di video terakhir. Animasi membutuhkan waktu untuk dijalankan. Bagaimana jika Anda ingin hal lain terjadi tepat saat animasi itu selesai? Apakah Anda harus melakukan setTimeoutyang sama panjangnya dengan animasinya? Nggak. jQuery memberi kita fungsi panggilan balik yang digunakan hanya untuk tujuan itu.
Mereka biasanya merupakan parameter tambahan yang kami teruskan ke metode. Dalam kasus animasi, kami meneruskan fungsi sebagai parameter terakhir. Itu adalah fungsi panggilan balik, dan akan dipanggil setelah animasi selesai.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Itu mungkin terlihat sedikit funky, tetapi pada dasarnya kami hanya melakukan:
.animate(a, b)Dimana aadalah objek properti dan nilai, dan bmerupakan fungsi panggilan balik.
Tapi kita tahu dari video terakhir bahwa animasi juga dapat mengambil parameter waktu yang menentukan berapa lama waktu yang dibutuhkan animasi. Kemana perginya? Itu adalah parameter opsional, sama seperti fungsi callback. Jika kami ingin menggunakannya, kami akan meletakkannya tepat di tengah, jadi pada dasarnya:
.animate(propertiesObject, duration, callback);Dan ada parameter opsional lain juga, string yang bisa kita berikan untuk menentukan nilai easing.
.animate(propertiesObject, duration, easing, callback);jQuery kebetulan keren dan pintar tentang parameter opsional tersebut. Jika Anda meninggalkan dua di tengah dan hanya meneruskan callback, itu dapat memberitahu apa yang Anda berikan adalah sebuah fungsi, bukan angka atau string, jadi ia tahu yang Anda maksud adalah fungsi callback. Anda tidak harus memberikan nilai palsu atau apapun. Itu hanya desain API yang bagus!
Saat Anda melihat dokumentasi jQuery, mereka menunjukkannya seperti ini:
.animate (properti (, durasi) (, easing) (, complete))
Kemudian tepat setelah jelaskan jenis yang diharapkan.
Tapi bagaimanapun, kembali ke panggilan balik. Anda bisa menjadi sangat bersarang. Bayangkan menempatkan animasi lain dalam fungsi callback, dan animasi itu memiliki callback sendiri. Itu sangat masuk akal, karena Anda mungkin ingin membuat animasi multi-langkah. Anda hanya perlu tetap teratur.
Lihat Pena 450c5810be27a9a8946cb8012cbd1213 oleh Chris Coyier (@chriscoyier) di CodePen
Kami hanya menggunakan animasi sebagai contoh di sini. Mungkin penggunaan fungsi callback yang lebih umum adalah Ajax. Ajax adalah saat browser memanggil sumber daya lain tanpa menyegarkan halaman. Itu bisa memakan waktu yang sangat lama. Itu tergantung pada bandwidth dan latensi dan ukuran file dan kondisi kesalahan dan segala macam hal. Anda mungkin tidak dapat melakukan apa pun dengan permintaan Ajax itu sampai Anda mendapatkan sesuatu kembali atau informasi lebih lanjut. Fungsi panggilan balik sempurna untuk itu, dan kita akan membahasnya nanti.