Cara memanggil beberapa fungsi panggilan balik dalam javascript

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

1. 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

2. 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)

3. 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'
    */
});

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('https://api.github.com/users', function(users) {
  /* Display all users */
  console.log(users);
  http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) {
  /* Display all top contributors */
    console.log(contributors);
    http.get('https://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

1. Dengan menggunakan janji
2. Dengan bantuan async-menunggu
3. 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'
    */
});

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'
    */
});

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'
    */
});

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

Berapa banyak fungsi panggilan balik yang dapat dijalankan setiap saat?

Bagaimana cara memanggil fungsi panggilan balik dalam JavaScript?

Bisakah fungsi panggilan balik memanggil fungsi lain?

Bagaimana cara memanggil fungsi kedua setelah yang pertama dijalankan dalam JavaScript?