Apakah Fungsi Panggilan Balik dalam JavaScript?

Artikel ini memberikan pengenalan ringkas mengenai konsep dan penggunaan fungsi panggilan balik dalam bahasa pengaturcaraan JavaScript.

Fungsi adalah Objek

Perkara pertama yang perlu kita ketahui adalah bahawa dalam Javascript, fungsi adalah objek kelas pertama. Dengan demikian, kita dapat bekerja dengan mereka dengan cara yang sama seperti kita bekerja dengan objek lain, seperti menetapkannya ke pemboleh ubah dan meneruskannya sebagai argumen ke fungsi lain. Ini penting, kerana teknik terakhir ini membolehkan kita memperluas fungsi dalam aplikasi kita.

Fungsi Panggilan Balik

A fungsi panggil balik adalah fungsi yang diluluskan sebagai hujah ke fungsi yang lain, yang akan "dipanggil kembali" pada masa yang lain. Fungsi yang menerima fungsi lain sebagai argumen disebut fungsi urutan tinggi , yang berisi logik untuk ketika fungsi panggilan balik dijalankan. Kombinasi kedua-duanya inilah yang membolehkan kami memperluas fungsi kami.

Untuk menggambarkan panggilan balik, mari kita mulakan dengan contoh mudah:

function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 } function logQuote(quote){ console.log(quote); } createQuote("eat your vegetables!", logQuote); // 1 // Result in console: // Like I always say, eat your vegetables!

Dalam contoh di atas, createQuoteadalah fungsi pesanan tinggi, yang menerima dua argumen, yang kedua adalah panggilan balik. The logQuotefungsi yang digunakan untuk lulus sebagai fungsi panggil balik kami. Ketika kita menjalankan createQuotefungsi (1) , perhatikan bahwa kita tidak menambahkan tanda kurung logQuoteketika kita meneruskannya sebagai argumen. Ini kerana kami tidak mahu segera menjalankan fungsi panggilan balik, kami hanya ingin menyampaikan definisi fungsi ke fungsi pesanan tinggi sehingga dapat dilaksanakan kemudian.

Juga, kita perlu memastikan bahawa jika fungsi panggilan balik yang kita lalui mengharapkan argumen, kita memberikan argumen tersebut ketika menjalankan panggilan balik (2) . Dalam contoh di atas, itulah callback(myQuote);pernyataannya, kerana kita tahu bahawa logQuotemengharapkan petikan akan diserahkan.

Selain itu, kita boleh meneruskan fungsi tanpa nama sebagai panggilan balik. Panggilan ke bawah createQuoteakan mempunyai hasil yang sama dengan contoh di atas:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

Secara kebetulan, anda tidak perlu menggunakan kata "callback" sebagai nama argumen anda, Javascript hanya perlu tahu bahawa itu adalah nama argumen yang betul. Berdasarkan contoh di atas, fungsi di bawah akan bertindak dengan cara yang sama.

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

Mengapa menggunakan fungsi Panggilan Balik?

Sebilangan besar masa kita membuat program dan aplikasi yang beroperasi secara serentak . Dengan kata lain, beberapa operasi kami dimulakan hanya setelah operasi sebelumnya selesai. Selalunya ketika kita meminta data dari sumber lain, seperti API luaran, kita tidak selalu tahu kapan data kita akan disajikan kembali. Dalam keadaan seperti ini, kami ingin menunggu respons, tetapi kami tidak selalu ingin seluruh aplikasi kami berhenti sementara data kami diambil. Situasi ini di mana fungsi panggilan balik berguna.

Mari kita lihat contoh yang mensimulasikan permintaan ke pelayan:

function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); } function getResults(results){ console.log("Response from the server: " + results); } serverRequest("The glass is half ", getResults); // Result in console after 5 second delay: // Response from the server: The glass is half full!

Dalam contoh di atas, kami membuat permintaan palsu ke pelayan. Selepas 5 saat berlalu, tindak balas diubah dan kemudian fungsi panggilan balik kami getResultsdilaksanakan. Untuk melihat tindakan ini, anda boleh menyalin / menampal kod di atas ke alat pembangun penyemak imbas anda dan melaksanakannya.

Juga, jika anda sudah biasa setTimeout, anda telah menggunakan fungsi panggilan balik selama ini. Argumen fungsi tanpa nama yang dimasukkan ke dalam setTimeoutfungsi panggilan contoh di atas juga merupakan panggilan balik! Oleh itu, panggilan balik asal contohnya dilaksanakan oleh panggilan balik yang lain. Berhati-hatilah untuk tidak meletakkan terlalu banyak panggilan balik jika anda dapat menolongnya, kerana ini boleh menyebabkan sesuatu yang disebut "callback hell"! Seperti namanya, bukan kegembiraan untuk ditangani.