Fungsi Panggilan Balik JavaScript - Apa itu Panggilan Balik di JS dan Cara Menggunakannya

Sekiranya anda sudah biasa dengan pengaturcaraan, anda sudah tahu fungsi apa dan cara menggunakannya. Tetapi apakah fungsi panggilan balik? Fungsi panggilan balik adalah bahagian penting dalam JavaScript dan setelah anda memahami bagaimana panggilan balik berfungsi, anda akan menjadi lebih baik dalam JavaScript.

Oleh itu, dalam catatan ini, saya ingin membantu anda memahami fungsi panggilan balik dan bagaimana menggunakannya dalam JavaScript dengan melalui beberapa contoh.

Apakah Fungsi Panggilan Balik?

Dalam JavaScript, fungsi adalah objek. Bolehkah kita menyampaikan objek ke fungsi sebagai parameter? Ya.

Jadi, kita juga dapat menyampaikan fungsi sebagai parameter ke fungsi lain dan memanggilnya di dalam fungsi luar. Bunyi rumit? Izinkan saya menunjukkannya dalam contoh di bawah:

function print(callback) { callback(); }

Fungsi print () mengambil fungsi lain sebagai parameter dan memanggilnya ke dalam. Ini berlaku dalam JavaScript dan kami menyebutnya "callback". Jadi fungsi yang diteruskan ke fungsi lain sebagai parameter adalah fungsi panggilan balik. Tetapi bukan itu sahaja.

Anda juga dapat menonton versi video fungsi panggilan balik di bawah:

Mengapa kita memerlukan Fungsi Panggilan Balik?

JavaScript menjalankan kod secara berurutan dari atas ke bawah. Walau bagaimanapun, terdapat beberapa kes yang menjalankan kod (atau mesti dijalankan) setelah sesuatu yang lain berlaku dan juga tidak berurutan. Ini dipanggil pengaturcaraan tak segerak.

Panggilan balik memastikan bahawa fungsi tidak akan dijalankan sebelum tugas selesai tetapi akan berjalan tepat setelah tugas selesai. Ini membantu kami mengembangkan kod JavaScript tidak segerak dan membuat kami selamat dari masalah dan kesilapan.

Dalam JavaScript, cara membuat fungsi panggilan balik adalah dengan meneruskannya sebagai parameter ke fungsi lain, dan kemudian memanggilnya kembali tepat setelah sesuatu terjadi atau beberapa tugas selesai. Mari lihat bagaimana…

Cara membuat Panggilan Balik

Untuk memahami apa yang telah saya jelaskan di atas, izinkan saya memulakan dengan contoh ringkas. Kami mahu log mesej ke konsol tetapi ia akan sampai selepas 3 saat.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

Ada metode bawaan dalam JavaScript yang disebut "setTimeout", yang memanggil fungsi atau menilai ekspresi setelah jangka waktu tertentu (dalam milidetik). Jadi di sini, fungsi "mesej" dipanggil setelah 3 saat berlalu. (1 saat = 1000 milisaat)

Dengan kata lain, fungsi mesej dipanggil setelah sesuatu berlaku (setelah 3 saat berlalu untuk contoh ini), tetapi tidak sebelumnya. Jadi fungsi mesej adalah contoh fungsi panggilan balik.

Apakah Fungsi Tanpa Nama?

Sebagai alternatif, kita dapat menentukan fungsi secara langsung di dalam fungsi lain, bukannya memanggilnya. Ia akan kelihatan seperti ini:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Seperti yang kita lihat, fungsi panggilan balik di sini tidak memiliki nama dan definisi fungsi tanpa nama dalam JavaScript disebut sebagai "fungsi tanpa nama". Ini melakukan tugas yang sama seperti contoh di atas.

Panggilan Balik sebagai Fungsi Panah

Sekiranya anda mahu, anda juga boleh menulis fungsi panggilan balik yang sama dengan fungsi panah ES6, yang merupakan jenis fungsi yang lebih baru dalam JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Bagaimana dengan Acara?

JavaScript adalah bahasa pengaturcaraan berdasarkan acara. Kami juga menggunakan fungsi panggilan balik untuk pengisytiharan acara. Sebagai contoh, katakan kita mahu pengguna mengklik butang:

Click here

Kali ini kita akan melihat mesej di konsol hanya apabila pengguna mengklik butang:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Jadi di sini kita memilih butang terlebih dahulu dengan idnya, dan kemudian kita menambah pendengar acara dengan kaedah addEventListener. Ia memerlukan 2 parameter. Yang pertama adalah jenisnya, "klik", dan parameter kedua adalah fungsi panggilan balik, yang mencatat log ketika butang diklik.

Seperti yang anda lihat, fungsi panggilan balik juga digunakan untuk pernyataan peristiwa dalam JavaScript.

Balut

Panggilan balik sering digunakan dalam JavaScript, dan saya harap siaran ini dapat membantu anda memahami apa yang sebenarnya mereka lakukan dan cara bekerja dengannya lebih mudah. Seterusnya, anda boleh belajar mengenai Janji JavaScript yang merupakan topik serupa yang telah saya jelaskan dalam catatan baru saya.

Sekiranya anda ingin mengetahui lebih lanjut mengenai pembangunan web, sila ikuti saya di Youtube !

Terima kasih kerana membaca!