Fungsi Panggilan Balik (Callback) dalam JavaScript

Dalam JavaScript, pengaturcara boleh mendefinisikan unit kod seperti pembolehubah dan fungsi. Fungsi boleh menerima parameter, dan kod yang memanggil fungsi boleh menghantar nilai atau rujukan kepada fungsi lain sebagai parameter. Fungsi panggilan balik (callback) biasanya dipanggil ketika fungsi lain selesai melaksanakan tugasnya, dan sering digunakan sebagai parameter bagi fungsi tersebut.

Definisi Callback

Untuk melaksanakan fungsi panggilan balik, kod JavaScript perlu mendefinisikan fungsi terlebih dahulu. Contoh berikut menunjukkan bagaimana mendefinisikan fungsi dan menyimpan rujukan fungsi dalam pembolehubah:

var callbackDefinition = function(numParam) {
    alert(numParam);
};

Fungsi ini menggunakan parameter numerik sebagai contoh. Anda boleh menulis sebarang kod JavaScript dalam fungsi panggilan balik. Setelah fungsi didefinisikan, anda boleh menghantar rujukan fungsi tersebut sebagai parameter kepada fungsi lain.

Parameter Callback

Apabila fungsi sudah ditetapkan sebagai pembolehubah, ia boleh dipanggil sebagai parameter kepada fungsi lain. Contoh berikut mempamerkan teknik ini:

mainFunction(10, callbackDefinition);

Di sini, fungsi utama dipanggil dengan dua parameter: nombor dan nama pembolehubah yang menyimpan fungsi panggilan balik. Fungsi yang menerima parameter ini dapat memanggil fungsi yang direkodkan.

Pelaksanaan Fungsi

Setelah fungsi dipanggil, fungsi panggilan balik dapat dieksekusi. Berikut contoh pelaksanaan fungsi utama dan panggilan baliknya:

function mainFunction(myNum, callbackFn) {
    alert(myNum);
    callbackFn(myNum * 2);
}

Fungsi utama pertama-tama menunjukkan dialog alar dengan nilai myNum. Kemudian ia memanggil fungsi panggilan balik, menghantar nilai dua kali ganda sebagai parameter.

Panggilan Fungsi

Setelah fungsi ditentukan, ia boleh dijalankan di dalam halaman web. Biasanya, pembangun mengarahkan pelayar untuk memantau peristiwa pengguna dan melaksanakan fungsi apabila peristiwa itu berlaku. Contohnya, berikut kod HTML yang memanggil fungsi melalui butang:

<button onclick="doCallback()">Klik Saya</button>

Definisi fungsi doCallback di bawah mengandungi fungsi panggilan balik dan memanggil fungsi utama:

function doCallback() {
    var callFn = function(numParam) {
        alert(numParam);
    };
    mainFunction(10, callFn);
}

Apabila butang diklik, fungsi utama dijalankan dan seterusnya memanggil fungsi panggilan balik, menghasilkan dua dialog alar berturut-turut.