Dalam situasi ini, jalankan () adalah fungsi dari modul pihak ketiga yang saya gunakan, dan panggilan balik ini dipanggil berkali-kali pada beberapa situasi aneh. Sebagian besar kasus seperti koneksi berhasil diaktifkan dan setelah itu kesalahan dipicu. Pada saat kesalahan dipanggil, saya akan berhasil menyelesaikan semua operasi saya. Ini hanya contoh.
fungsi panggilan balik JavaScript; . Tetapi saya yakin bahwa setelah membaca artikel ini secara menyeluruh, Anda akan dapat mengatasi kendala apa pun yang sebelumnya Anda alami dengan panggilan balik
Sebelum kita mulai, pertama-tama pastikan pemahaman kita tentang fungsi secara umum sudah kuat.
Rekap Cepat. Fungsi Javascript
Apa Itu Fungsi?
Fungsi adalah blok bangunan logis di dalamnya sekumpulan kode ditulis untuk melakukan tugas tertentu. Secara praktis, fungsi memungkinkan penulisan kode dengan cara yang lebih terorganisir yang juga mudah di-debug dan dipelihara. Fungsi juga memungkinkan penggunaan kembali kode
Anda mendefinisikan fungsi sekali dan memanggilnya saat Anda perlu tanpa menulis kode yang sama berulang kali
Anda mungkin juga suka. Fungsi Panggilan Balik Javascript
Mendeklarasikan Fungsi
Kami berbicara sedikit tentang apa itu fungsi. Sekarang, mari kita lihat bagaimana mendeklarasikan suatu fungsi dalam javascript
Menggunakan Pembuat Fungsi. Dalam pendekatan ini, fungsi dibuat dengan bantuan konstruktor "Fungsi". Secara teknis, pendekatan ini kurang efisien daripada mendeklarasikan fungsi dengan sintaks ekspresi fungsi dan sintaks pernyataan deklarasi fungsi
Menggunakan Ekspresi Fungsi. Biasanya, pendekatan ini sama dengan penugasan variabel. Dengan kata sederhana, badan fungsi dianggap sebagai ekspresi, dan ekspresi itu ditugaskan ke variabel. Fungsi yang didefinisikan dengan sintaks ini dapat diberi nama atau anonim
Fungsi yang tidak memiliki nama dikenal sebagai fungsi anonim. Fungsi anonim dipanggil sendiri, yang artinya memanggil dirinya sendiri secara otomatis. Perilaku ini juga dikenal sebagai ekspresi fungsi yang segera dipanggil (IIFE)Menggunakan Pernyataan Deklarasi Fungsi. Sebenarnya, metode ini adalah metode jadul yang umum digunakan di JavaScript. Di sini, setelah kata kunci "fungsi", Anda harus menentukan nama fungsinya. Setelah itu, jika fungsi menerima beberapa parameter atau argumen, Anda perlu menyebutkannya juga. Meskipun, bagian ini sepenuhnya opsional
Di badan fungsi, fungsi harus mengembalikan nilai ke pemanggil. Setelah pernyataan pengembalian ditemukan, fungsi akan berhenti dijalankan. Di dalam fungsi, parameter akan bertindak sebagai variabel lokal
Juga, variabel yang dideklarasikan di dalam fungsi akan bersifat lokal untuk fungsi itu. Variabel lokal hanya dapat diakses di dalam fungsi tersebut, sehingga variabel dengan nama yang sama dapat dengan mudah digunakan di fungsi yang berbeda
Memanggil Fungsi
Fungsi yang dideklarasikan sebelumnya akan dipanggil ketika salah satu dari hal berikut terjadi
- Ketika suatu peristiwa terjadi, misalnya, pengguna mengklik tombol, atau pengguna memilih beberapa opsi dari daftar dropdown, dll.
- Saat fungsi dipanggil dari kode javascript
- Fungsi juga dapat dipanggil secara otomatis, kita telah membahasnya dalam ekspresi fungsi anonim
Operator () memanggil fungsi
Apa itu Fungsi Panggilan Balik?
Sesuai MDN. Fungsi panggilan balik adalah fungsi yang diteruskan ke fungsi lain sebagai argumen, yang kemudian dipanggil di dalam fungsi luar untuk menyelesaikan semacam rutinitas atau tindakan
Izinkan saya mengklarifikasi ini dengan kata-kata sederhana, fungsi panggilan balik adalah fungsi yang akan dijalankan tepat setelah fungsi lain selesai dijalankan. Fungsi panggilan balik adalah fungsi yang diteruskan sebagai argumen ke fungsi JavaScript lainnya. Fungsi panggilan balik itu dijalankan di dalam fungsi yang diteruskannya
Dalam JavaScript, fungsi diperlakukan sebagai objek kelas satu; . Menjadi objek kelas satu, kita bisa meneruskan fungsi ke fungsi lain sebagai variabel, dan fungsi juga bisa dikembalikan dari fungsi lain
Fungsi yang dapat melakukan ini dikenal sebagai fungsi tingkat tinggi. Fungsi panggilan balik sebenarnya adalah sebuah pola. Kata "pola" berarti semacam metodologi yang terbukti untuk memecahkan masalah umum dalam pengembangan perangkat lunak. Di sana lebih baik memanggil penggunaan fungsi panggilan balik sebagai pola panggilan balik
Mengapa Kami Membutuhkan Panggilan Balik
JavaScript sisi klien berjalan di browser, dan proses browser utama adalah loop peristiwa utas tunggal. Jika kami mencoba menjalankan operasi yang berjalan lama dalam loop peristiwa berutas tunggal, prosesnya diblokir. Ini secara teknis buruk karena proses berhenti memproses acara lain sambil menunggu operasi Anda selesai
Misalnya, pernyataan "waspada" dianggap sebagai salah satu kode pemblokiran dalam javascript di browser. Jika Anda menjalankan lansiran, Anda tidak dapat lagi melakukan interaksi apa pun di dalam browser sampai Anda menutup jendela dialog lansiran. Untuk mencegah pemblokiran pada operasi yang berjalan lama, callback digunakan
Mari selami lebih dalam sehingga Anda akan memahami dengan tepat di skenario mana panggilan balik digunakan
Dalam cuplikan kode di atas, getMessage() fungsi dijalankan terlebih dahulu, lalu displayMessage() dijalankan. Keduanya menampilkan pesan di jendela konsol browser dan keduanya segera dieksekusi.
Dalam situasi tertentu, beberapa kode tidak segera dieksekusi. Misalnya, jika kita berasumsi bahwa fungsi getMessage()_ melakukan panggilan API di mana kita harus mengirim permintaan ke server dan menunggu respons. Lalu bagaimana kita bisa menghadapinya?
Cara Menggunakan Fungsi Callback
Daripada memberi tahu Anda tentang sintaks fungsi panggilan balik JavaScript, saya pikir akan lebih baik jika kami mencoba menerapkan fungsi panggilan balik pada contoh kami sebelumnya. Cuplikan kode ditunjukkan di bawah ini di tangkapan layar berikut
Untuk menggunakan fungsi panggilan balik, kita perlu melakukan semacam tugas yang tidak akan dapat menampilkan hasil dengan segera. Untuk meniru perilaku ini, kami menggunakan fungsi setTimeout() JavaScript. Fungsi itu akan memakan waktu dua detik untuk menampilkan pesan "Hi, there" ke jendela konsol
Setelah pesan ini ditampilkan, maka "Pesan yang ditampilkan" akan ditampilkan di jendela konsol browser. Dalam skenario ini, pertama-tama, kami menunggu fungsi getMessage() . Setelah fungsi ini berhasil dijalankan, kami menjalankan fungsi displayMessage()
Bagaimana Callback Bekerja
Izinkan saya menjelaskan apa yang sebenarnya terjadi di balik layar pada contoh sebelumnya
Seperti yang dapat Anda lihat dari contoh sebelumnya, dalam fungsi getMessage(), kami mengirimkan dua argumen. Argumen pertama adalah variabel var async = require('async'); async.waterfall([ function(callback) { /* Here, the first argument value is null, it indicates that the next function will be executed from the array of functions. If the value was true or any string then final callback function will be executed, other remaining functions in the array will not be executed. */ callback(null, 'one', 'two'); }, function(param1, param2, callback) { // param1 now equals 'one' and param2 now equals 'two' callback(null, 'three'); }, function(param1, callback) { // param1 now equals 'three' callback(null, 'done'); } ], function (err, result) { /* This is the final callback function. result now equals 'done' */ });0, yang ditampilkan di jendela konsol browser, dan argumen kedua adalah fungsi callback
Sekarang, Anda mungkin bertanya-tanya mengapa fungsi panggilan balik diteruskan sebagai argumen — untuk mengimplementasikan fungsi panggilan balik, kita harus meneruskan fungsi sebagai argumen ke fungsi lain
Setelah getMessage() menyelesaikan tugasnya, kita memanggil fungsi callback. Setelah itu, saat kita memanggil fungsi getMessage()_, kita meneruskan referensi ke fungsi displayMessage(), yang diperlakukan sebagai fungsi callback
Perhatikan bahwa, saat fungsi getMessage() dipanggil, kami hanya meneruskan referensi ke fungsi displayMessage() . Itu sebabnya, Anda tidak akan melihat fungsi memanggil operator i. e, "()" di sampingnya
Apakah Javascript Callback Asynchronous?
JavaScript dianggap sebagai bahasa scripting single-threaded. Yang kami maksud dengan single-threaded adalah bahwa JavaScript mengeksekusi satu blok kode pada satu waktu. Saat JavaScript sibuk mengeksekusi satu blok, tidak mungkin untuk berpindah ke blok berikutnya
Dengan kata lain, kita dapat mengatakan bahwa kode JavaScript selalu bersifat memblokir. Tetapi sifat pemblokiran ini mencegah kita menulis kode dalam situasi tertentu ketika kita tidak dapat memperoleh hasil langsung setelah menjalankan beberapa tugas tertentu
Saya berbicara tentang tugas-tugas seperti berikut ini
- Mengirim panggilan API ke titik akhir tertentu untuk mendapatkan data
- Mengirim permintaan jaringan untuk mendapatkan beberapa sumber daya (misalnya, file teks, file gambar, file biner, dll. ) dari server jarak jauh
Untuk menangani situasi ini, kita harus menulis kode asinkron dan fungsi callback adalah salah satu pendekatan untuk menghadapi situasi ini. Jadi, fungsi callback bersifat asinkron
Neraka Panggilan Balik Javascript
Callback hell terjadi ketika beberapa fungsi asinkron dijalankan satu demi satu. Ia juga dikenal sebagai piramida malapetaka
Anggap saja, Anda ingin mendapatkan daftar semua pengguna Github. Kemudian, di antara pengguna, Anda hanya ingin mencari kontributor teratas untuk repositori JavaScript. Kemudian, di antara para pengguna, Anda ingin mendapatkan detail tentang orang yang bernama John
Untuk mengimplementasikan fungsi ini dengan bantuan callback, cuplikan kode akan serupa seperti yang ditunjukkan di bawah ini
http.get('//api.github.com/users', function(users) { /* Display all users */ console.log(users); http.get('//api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) { /* Display all top contributors */ console.log(contributors); http.get('//api.github.com/users/Jhon', function(userData) { /* Display user with username 'Jhon' */ console.log(userData); }); }); });_Dari cuplikan kode di atas, Anda dapat melihat bahwa kode menjadi lebih sulit untuk dipahami, lebih sulit untuk dipertahankan, dan juga lebih sulit untuk dimodifikasi. Ini terjadi karena penyatuan semua fungsi callback
Bagaimana Anda Menghentikan Callback Hell?
Beberapa teknik dapat digunakan untuk menghindari callback hell ada sebagai berikut
- Dengan menggunakan janji
- Dengan bantuan async-menunggu
- Dengan menggunakan asinkron. perpustakaan js
Menggunakan Async. Perpustakaan js
Mari kita bicara tentang bekerja dengan async. js library untuk menghindari callback hell
Sesuai situs web resmi async. js. Async adalah modul utilitas yang menyediakan fungsi langsung dan kuat untuk bekerja dengan JavaScript asinkron
Asinkron. js menyediakan sekitar 70 fungsi secara total. Untuk saat ini, kita hanya akan membahas dua di antaranya i. e, asinkron. air terjun() dan asinkron. seri()
asinkron. air terjun()
Metode ini berguna ketika Anda ingin menjalankan beberapa tugas satu per satu dan kemudian meneruskan hasil dari tugas sebelumnya ke tugas berikutnya. Dibutuhkan larik fungsi "tugas" dan fungsi "panggilan balik" terakhir yang dipanggil setelah semua fungsi dalam larik "tugas" selesai atau "panggilan balik" dipanggil dengan objek kesalahan
var async = require('async'); async.waterfall([ function(callback) { /* Here, the first argument value is null, it indicates that the next function will be executed from the array of functions. If the value was true or any string then final callback function will be executed, other remaining functions in the array will not be executed. */ callback(null, 'one', 'two'); }, function(param1, param2, callback) { // param1 now equals 'one' and param2 now equals 'two' callback(null, 'three'); }, function(param1, callback) { // param1 now equals 'three' callback(null, 'done'); } ], function (err, result) { /* This is the final callback function. result now equals 'done' */ });asinkron. seri()
Fungsi ini berguna saat Anda ingin menjalankan fungsi, dan kemudian Anda perlu mendapatkan hasilnya setelah semua fungsi berhasil dijalankan. Perbedaan utama antara var async = require('async'); async.waterfall([ function(callback) { /* Here, the first argument value is null, it indicates that the next function will be executed from the array of functions. If the value was true or any string then final callback function will be executed, other remaining functions in the array will not be executed. */ callback(null, 'one', 'two'); }, function(param1, param2, callback) { // param1 now equals 'one' and param2 now equals 'two' callback(null, 'three'); }, function(param1, callback) { // param1 now equals 'three' callback(null, 'done'); } ], function (err, result) { /* This is the final callback function. result now equals 'done' */ });6 dan var async = require('async'); async.waterfall([ function(callback) { /* Here, the first argument value is null, it indicates that the next function will be executed from the array of functions. If the value was true or any string then final callback function will be executed, other remaining functions in the array will not be executed. */ callback(null, 'one', 'two'); }, function(param1, param2, callback) { // param1 now equals 'one' and param2 now equals 'two' callback(null, 'three'); }, function(param1, callback) { // param1 now equals 'three' callback(null, 'done'); } ], function (err, result) { /* This is the final callback function. result now equals 'done' */ });7 adalah bahwa var async = require('async'); async.waterfall([ function(callback) { /* Here, the first argument value is null, it indicates that the next function will be executed from the array of functions. If the value was true or any string then final callback function will be executed, other remaining functions in the array will not be executed. */ callback(null, 'one', 'two'); }, function(param1, param2, callback) { // param1 now equals 'one' and param2 now equals 'two' callback(null, 'three'); }, function(param1, callback) { // param1 now equals 'three' callback(null, 'done'); } ], function (err, result) { /* This is the final callback function. result now equals 'done' */ });7 tidak meneruskan data dari satu fungsi ke fungsi lainnya.
async.series([ function(callback) { // do some stuff ... callback(null, 'one'); }, function(callback) { // do some more stuff ... callback(null, 'two'); } ], // optional callback function(err, results) { // results is now equal to ['one', 'two'] });_Panggilan Balik Javascript vs Penutupan
Penutupan
Dalam istilah teknis, penutupan adalah kombinasi dari fungsi yang digabungkan bersama yang memiliki referensi ke keadaan sekitarnya
Sederhananya, penutupan memungkinkan akses ke ruang lingkup fungsi luar dari fungsi dalam
Untuk menggunakan sebuah closure, kita perlu mendefinisikan sebuah fungsi di dalam fungsi lain. Kemudian, kita perlu mengembalikannya atau meneruskannya ke fungsi lain
Telepon balik
Secara konseptual callback mirip dengan penutupan. Panggilan balik pada dasarnya adalah tempat suatu fungsi menerima fungsi lain sebagai argumen
Kata Akhir
Saya harap artikel ini menghapus semua keraguan Anda tentang fungsi panggilan balik javascript. Jika Anda merasa artikel ini bermanfaat, bagikan di antara yang lain