Panggilan Balik JavaScript
"Aku akan menelepon kembali nanti!"
Panggilan balik adalah fungsi yang diteruskan sebagai argumen ke fungsi lain
Teknik ini memungkinkan suatu fungsi untuk memanggil fungsi lain
Fungsi panggilan balik dapat berjalan setelah fungsi lain selesai
Urutan Fungsi
Fungsi JavaScript dijalankan dalam urutan yang disebut. Tidak dalam urutan mereka didefinisikan.
Contoh ini akan menampilkan "Selamat tinggal":
Contoh
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Contoh ini akan menampilkan "Halo":
Contoh
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Kontrol Urutan
Terkadang Anda ingin memiliki kontrol yang lebih baik saat menjalankan suatu fungsi.
Misalkan Anda ingin melakukan perhitungan, dan kemudian menampilkan hasilnya.
Anda dapat memanggil fungsi kalkulator ( myCalculator), menyimpan hasilnya, lalu memanggil fungsi lain ( myDisplayer) untuk menampilkan hasilnya:
Contoh
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
Atau, Anda dapat memanggil fungsi kalkulator ( myCalculator), dan membiarkan fungsi kalkulator memanggil fungsi tampilan ( myDisplayer):
Contoh
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Masalah dengan contoh pertama di atas, adalah Anda harus memanggil dua fungsi untuk menampilkan hasilnya.
Masalah dengan contoh kedua, adalah Anda tidak dapat mencegah fungsi kalkulator menampilkan hasilnya.
Sekarang saatnya untuk melakukan panggilan balik.
Panggilan Balik JavaScript
Callback adalah fungsi yang diteruskan sebagai argumen ke fungsi lain.
Menggunakan panggilan balik, Anda dapat memanggil fungsi kalkulator ( myCalculator) dengan panggilan balik, dan membiarkan fungsi kalkulator menjalankan panggilan balik setelah penghitungan selesai:
Contoh
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Pada contoh di atas, myDisplayeradalah nama dari sebuah fungsi.
Itu diteruskan myCalculator()sebagai argumen.
Saat Anda melewatkan fungsi sebagai argumen, ingatlah untuk tidak menggunakan tanda kurung.
Kanan: myCalculator(5, 5, myDisplayer);
Salah:myCalculator(5, 5, myDisplayer());
Kapan Menggunakan Panggilan Balik?
Contoh di atas tidak terlalu menarik.
Mereka disederhanakan untuk mengajari Anda sintaks panggilan balik.
Di mana panggilan balik benar-benar bersinar dalam fungsi asinkron, di mana satu fungsi harus menunggu fungsi lain (seperti menunggu file dimuat).
Fungsi asinkron dibahas dalam bab berikutnya.