Dalam tutorial ini, Anda akan belajar tentang fungsi panggilan balik JavaScript dengan bantuan contoh.
Fungsi adalah blok kode yang melakukan tugas tertentu saat dipanggil. Sebagai contoh,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
Dalam program di atas, nilai string dilewatkan sebagai argumen ke greet()fungsi.
Di JavaScript, Anda juga bisa meneruskan fungsi sebagai argumen ke suatu fungsi. Fungsi yang diteruskan sebagai argumen di dalam fungsi lain ini disebut fungsi callback. Sebagai contoh,
// function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);
Keluaran
Hai Peter, saya fungsi panggilan balik
Dalam program di atas, ada dua fungsi. Saat memanggil greet()fungsi, dua argumen (nilai string dan fungsi) dilewatkan.
The callMe()fungsi adalah fungsi callback.
Manfaat Fungsi Callback
Manfaat menggunakan fungsi panggilan balik adalah Anda dapat menunggu hasil dari panggilan fungsi sebelumnya dan kemudian menjalankan panggilan fungsi lainnya.
Dalam contoh ini, kita akan menggunakan setTimeout()metode untuk meniru program yang membutuhkan waktu untuk dieksekusi, seperti data yang berasal dari server.
Contoh: Program dengan setTimeout ()
// program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');
Keluaran
Halo John Halo dunia
Seperti yang Anda ketahui, metode setTimeout () mengeksekusi blok kode setelah waktu yang ditentukan.
Di sini, greet()fungsinya dipanggil setelah 2000 milidetik ( 2 detik). Selama menunggu ini, sayName('John');dieksekusi. Itulah mengapa Hello John dicetak sebelum Hello world.
Kode di atas dijalankan secara asinkron (fungsi kedua; sayName()tidak menunggu fungsi pertama; greet()selesai).
Contoh: Menggunakan Fungsi Callback
Dalam contoh di atas, fungsi kedua tidak menunggu hingga fungsi pertama selesai. Namun, jika Anda ingin menunggu hasil dari pemanggilan fungsi sebelumnya sebelum pernyataan berikutnya dijalankan, Anda dapat menggunakan fungsi callback. Sebagai contoh,
// Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);
Keluaran
Halo dunia Halo John
Dalam program di atas, kode dijalankan secara sinkron. The sayName()Fungsi dilewatkan sebagai argumen ke greet()fungsi.
The setTimeout()Metode mengeksekusi greet()fungsi hanya setelah 2 detik. Namun, sayName()fungsi tersebut menunggu eksekusi greet()fungsinya.
Catatan : Fungsi callback sangat membantu saat Anda harus menunggu hasil yang membutuhkan waktu. Misalnya data yang berasal dari server karena membutuhkan waktu lama untuk sampai data.
