Callback in JavaScript: Panduan Lengkap – Codewithaden

Dalam JavaScript, fungsi adalah objek. Karena itu, fungsi dapat mengambil fungsi sebagai argumen dan dapat dikembalikan oleh fungsi lain. Fungsi yang melakukan ini disebut Fungsi tingkat tinggi . Fungsi apa pun yang disahkan sebagai argumen disebut a fungsi panggilan balik . Jadi, kita bisa menggunakannya sebagai variabel seperti String dan Objek . Jika mereka variabel, maka kita dapat melakukan hal berikut dengan mereka.

  1. Fungsi lewat sebagai argumen ke fungsi.
  2. Fungsi kembali dari suatu fungsi.
  3. Menyimpan fungsi anonim ke dalam variabel.

Callback di JavaScript

Fungsi diteruskan ke fungsi lain sebagai argumen, dan fungsi yang diberikan dieksekusi di dalam fungsi lain dan fungsi parameter itu disebut Panggilan balik. Kami sering menggunakan panggilan balik, terutama di jQuery, di mana kami mendengarkan dari acara DOM dan meneruskan panggilan balik ke fungsi itu. Sebagai contoh

Contoh 1

jQuery("button").click(function() {
  alert("Clicked");
}); 

Saat kami mengklik tombol pada saat yang sama, acara klik ditembakkan, dan kami melewati Fungsi anonim sebagai parameter, dan itu Fungsi anonim disebut Panggilan balik. Jadi di Contoh ini, argumen fungsi klik adalah fungsi lain. Jadi fungsi lain adalah a panggilan balik.

Di mana pun Klik Event terjadi, fungsi parameterisasi akan dieksekusi, atau dengan kata lain, Panggilan balik dieksekusi.

Kami juga dapat menyimpan fungsi ke dalam variabel seperti,

//main.js

let mj = () => {
    return 'mj';
}
console.log(mj()); 

Dalam contoh di atas, kami telah menyimpan fungsi ke dalam variabel yang disebut MJ, Dan kemudian kami menyebutnya, dan kemudian di konsol, kami dapat melihat “ MJ “. Saya telah menggunakan fungsi panah, yang baru Es6 fitur di Javascript

Jika Anda langsung menjalankan kode di atas di browser, Anda mungkin menghadapi masalah berikut.

Kemungkinan kesalahan

  1. Anda bisa mendapatkan kesalahan sintaks.
  2. Jika Anda melakukan kode langsung di browser Anda, maka kemungkinan besar gagal Webpack proses kompilasi.

Solusi yang memungkinkan

  1. Panduan Pemula untuk Mengatur Lingkungan Pengembangan ES6 Ikuti artikel ini secara ketat dan masukkan kode di atas di Main.js mengajukan.

Contoh #2

//main.js

let dance = (param) => {
    return `MJ is ${param}`;
}
let sing = (param) => {
    return `MJ is ${param}`;
}
let mj = (param, fn) => {
    return fn(param);
}
console.log(mj('singing', sing));
console.log(mj('dancing', dance));
 

Keluaran

MJ is singing
MJ is dancing 

Dalam contoh di atas, kami pertama kali mendefinisikan dua fungsi. menari() dan menyanyi().

Selanjutnya, kami telah membuat satu fungsi lagi yang disebut mJ (), yang menerima dua argumen.

  1. bernyanyi/menari sebagai rangkaian
  2. Fungsi atau panggilan balik anonim

Fungsi panggilan balik tidak lain adalah dua fungsi yang ditentukan sebelumnya.

  1. menari()
  2. menyanyi()

Jadi, dalam kasus kami, tari () dan sing () adalah panggilan balik

Contoh #3

//main.js

setTimeout(()=> {
    console.log('1st');
    setTimeout(()=>{
        console.log('2nd');
        setTimeout(()=>{
            console.log('3rd');
        }, 1000);
    }, 1000);
},1000); 

Dalam contoh di atas, kami telah menggunakan acara setTimeout, yaitu Asinkron dan sepenuhnya tergantung pada interval waktu yang ditentukan. Di sini juga, acara SetTimeout menerima dua parameter.

  1. Fungsi anonim
  2. Waktu (milidetik)

Pada fungsi interval waktu yang diberikan dipecat dan mencatat pernyataan.

Keluaran

1st
2nd
3rd 

Poin yang mengesankan

  1. Satu hal yang perlu diingat adalah bahwa kita tidak menjalankan fungsi dalam parameter; Kami hanya melewati definisi fungsi. Fungsi parameter dieksekusi di dalam fungsi utama.
  2. Jika Anda telah membaca saya Penutupan Artikel, fungsi orang dalam dapat mengakses semua variabel dan sifat fungsi orang luar. Jadi, panggilan balik memiliki akses ke ruang lingkup leksikal luar. Itu berarti panggilan balik berperilaku sebagai Penutupan juga.
  3. Fungsi tingkat tinggi adalah nama kedua fungsi allback Karena perilaku mereka, seperti melewati fungsi lain sebagai argumen dan mengembalikan fungsi sebagai nilai dari fungsi lain.
callbacks
Callbacks di JavaScript

Pada gambar di atas, kami tidak selalu melewati parameter kedua sebagai nilai; Saya baru saja mengambil contoh bahwa ada banyak fungsi anonim. Sebagai gantinya, nilai dapat diberikan fungsi utama dan nanti akan mengeksekusi di dalam fungsi itu. Itu akan selalu berperilaku sebagai Penutupan.

Jika Anda masih memiliki keraguan, maka tanyakan pada komentar di bawah ini, saya senang membantu Anda.

Itu untuk tutorial ini.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *