Dalam tutorial ini, anda akan belajar mengenai fungsi panggilan balik JavaScript dengan bantuan contoh.
Fungsi adalah sekatan kod yang melakukan tugas tertentu ketika dipanggil. Sebagai contoh,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
Dalam program di atas, nilai rentetan diteruskan sebagai argumen ke greet()fungsi.
Dalam JavaScript, anda juga dapat meneruskan fungsi sebagai argumen ke fungsi. Fungsi ini yang diteruskan sebagai argumen di dalam fungsi lain disebut fungsi panggilan balik. 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);
Pengeluaran
Hai Peter saya fungsi panggilan balik
Dalam program di atas, terdapat dua fungsi. Semasa memanggil greet()fungsi, dua argumen (nilai rentetan dan fungsi) dilalui.
Yang callMe()fungsi adalah fungsi panggil balik.
Manfaat Fungsi Panggilan Balik
Manfaat menggunakan fungsi panggilan balik adalah anda dapat menunggu hasil panggilan fungsi sebelumnya dan kemudian melaksanakan panggilan fungsi yang lain.
Dalam contoh ini, kita akan menggunakan setTimeout()metode untuk meniru program yang memerlukan waktu untuk dilaksanakan, seperti data yang berasal dari pelayan.
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');
Pengeluaran
Hello John Hello dunia
Seperti yang anda ketahui, kaedah setTimeout () melaksanakan sekatan kod setelah waktu yang ditentukan.
Di sini, greet()fungsi dipanggil selepas 2000 milisaat ( 2 saat). Semasa penantian ini, sayName('John');ia dilaksanakan. Itulah sebabnya Hello John dicetak sebelum Hello world.
Kod di atas dilaksanakan secara tidak segerak (fungsi kedua; sayName()tidak menunggu fungsi pertama; greet()selesai).
Contoh: Menggunakan Fungsi Panggilan Balik
Dalam contoh di atas, fungsi kedua tidak menunggu fungsi pertama selesai. Namun, jika anda ingin menunggu hasil panggilan fungsi sebelumnya sebelum pernyataan berikutnya dijalankan, anda boleh menggunakan fungsi panggilan balik. 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);
Pengeluaran
Hello world Hello John
Dalam program di atas, kod tersebut dilaksanakan secara serentak. Yang sayName()fungsi diluluskan sebagai argumen kepada greet()fungsi.
The setTimeout()kaedah untuk melaksanakan sesuatu greet()fungsi hanya selepas 2 saat. Walau bagaimanapun, sayName()fungsi menunggu pelaksanaan greet()fungsi.
Catatan : Fungsi panggil balik berguna apabila anda harus menunggu hasil yang memerlukan masa. Contohnya, data yang datang dari pelayan kerana data memerlukan masa untuk tiba.
