Apa fungsi panggilan baliknya? Saya benar -benar tidak tahu cara menggunakan dan berfungsi fungsi panggilan balik JS sebelum mempelajarinya. Pada artikel berikut, saya akan memperkenalkan kepada Anda para siswa contoh fungsi panggilan balik pembelajaran saya. Siswa yang perlu tahu tidak harus berhati -hati untuk tidak memasukkan referensi.
Prinsip Fungsi Callback:
Saya akan pergi sekarang dan saya akan memberi tahu Anda. "
Ini adalah proses asinkron. Selama proses "I'm Would To" (Eksekusi Fungsi), "Anda" dapat melakukan apa saja, "tiba" (eksekusi fungsi selesai) dan "memberi tahu Anda" (panggilan balik) setelah proses "memberi tahu Anda" (panggilan balik) dilakukan
contoh
1. Metode Dasar
<bahasa skrip = "javascript" type = "text/javaScript"> function dosomething (callback) {//… // hubungi callbackCallback ('stuff', 'going', 'here');} function foo (a, b, c) {// saya callbackalert (a + "" + b + " + c); </script>Atau gunakan fungsi anonim
<script language = "javascript" type = "text/javascript"> function dosomething (damsg, callback) {alert (damsg); if (typeOf callback == "function") callback (); } dosomething ("callback function", function () {alert ("Sama seperti formulir callback jQuery!");}); </script>2. Metode Lanjutan
Metode Panggilan Menggunakan JavaScript
<bahasa skrip = "javascript" type = "text/javascript"> function thing (name) {this.name = name;} thing.prototype.dosomething = function (callback) {// hubungi callback kami, tetapi menggunakan instance kami sendiri sebagai contextCallback.call (this);} function foo () {this. Thing ('joe'); t.dosomething (foo); // peringatan "joe" melalui `foo` </script>Parameter lulus
<bahasa skrip = "javaScript" type = "text/javascript"> function thing (name) {this.name = name;} thing.prototype.dosomething = function (callback, salam) {// panggilan balik kami, tetapi menggunakan foo kami sendiri (salutasi) {salutasi (ini, salutasi (ini. hal baru ('joe'); t.dosomething (foo, 'hai'); // peringatan "Hai Joe" melalui `foo` </script>Lulus parameter menggunakan javascript
<bahasa skrip = "javascript" type = "text/javascript"> function thing (name) {this.name = name;} thing.prototype.dosomething = function (callback) {// Panggil panggilan balik kami, tetapi menggunakan instance kami sendiri sebagai contextCallback.Apply (ini, ['Hi', 3, 2, 1]); + this.name + "" + tiga + "" + dua + "" + satu);} var t = hal baru ('joe'); t.dosomething (foo); // Peringatan "Hi Joe 3 2 1" melalui `foo` </script>contoh
// Jika sumber data yang disediakan adalah integer, yang merupakan skor siswa, ketika num <= 0, itu diproses oleh lapisan yang mendasarinya, dan ketika n> 0, itu diproses oleh lapisan atas.
// Salin fungsi berikut dan simpan ke 1.js
fungsi f (num, callback) {if (num <0) {alert ("Panggil fungsi tingkat rendah untuk diproses!"); peringatan ("Skor tidak bisa negatif, kesalahan input!"); } else if (num == 0) {alert ("Panggil fungsi tingkat rendah untuk diproses!"); waspada ("Siswa mungkin tidak mengikuti ujian!"); } else {alert ("Panggil fungsi tingkat tinggi untuk diproses!"); callback (); }}// Simpan file test.html berikut di direktori yang sama dengan 1.js:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script src = "1.js" type = "text/javaScript"> </script> <title> unt judul dokumen </iteme> <script type = "text/javascript"> test fungsi () {var p = document.geteLementById ("pp"); pp.innerText = ""; var num = document.geteLementById ("skor"). nilai; f (num, function () {// Fungsi pemrosesan tingkat tinggi anonim jika (num <60) waspada ("Gagal!"); selain itu jika (num <= 90) peringatan ("Hasil yang sangat baik!"); Lainnya peringatan ("Hasil yang sangat baik!");}) pp.innertext = "oleh Sejak1978 QQ558064!"! " } </script> </head> <body> <p> Contoh fungsi panggilan balik: Ketika siswa skor <= 0 poin, lapisan bawah akan menanganinya; Saat skor> 0, lapisan atas akan menanganinya. </p> Harap masukkan skor siswa <input type = "text" id = "score"> <input type = "tombol" ontClick = "test ()" value = "Lihat hasilnya"> <p id = "pp"> </p> </body> </html>Berikut ini adalah penambahan dari netizen lain:
Mode panggilan balik di JavaScript:
Seperti yang ditunjukkan dalam:
function writeCode (callback) {// Jalankan beberapa hal, callback (); // ...} function intrducebugs () {//.... introduce kerentanan} writecode (intrducebugs);Kami meneruskan aplikasi fungsi ke writeCode (), sehingga writecode menjalankannya pada waktu yang tepat (kembali untuk memanggilnya nanti)
Pertama-tama mari kita lihat contoh yang tidak terlalu baik (akan diperbaiki nanti):
// Simulasi node DOM di halaman pencarian, dan kembalikan node yang ditemukan di array secara seragam // fungsi ini hanya digunakan untuk tidak menemukan pemrosesan logis untuk node dom var findnodes = function () {var i = 100000; // sejumlah besar loop, var node = []; // digunakan untuk menyimpan node dom yang ditemukan var yang ditemukan; while (i) {i -= 1; node.push (ditemukan); } return node; } // Sembunyikan semua node dom ditemukan var hide = function (node) {var i = 0, max = node.length; untuk (; i <max; i ++) {// Ada tanda kurung setelah temuan untuk menunjukkan eksekusi segera. Pertama -tama jalankan findnodes () dan kemudian jalankan hide () <hide (findnodes ()); menjalankan fungsi}; node [i] .style.display = "tidak ada"} metode di atas tidak efisien. Diperkirakan persembunyian () harus melintasi node array yang dikembalikan oleh findnodes () lagi. Bagaimana menghindari loop yang tidak perlu seperti itu. Kami tidak dapat secara langsung menyembunyikan node kueri di Findnodes (pencarian ini dapat memodifikasi kopling logis), sehingga tidak lagi menjadi fungsi umum. Solusinya adalah dengan menggunakan mode panggilan balik, di mana Anda dapat melewati logika tersembunyi dari node ke findnodes () dalam fungsi callback dan mendelegasikannya untuk mengeksekusi // refactor findnodes untuk menerima fungsi panggilan balik var findnodes = fUcntion (callback) {var i = 100000, node = [], found; // Periksa apakah fungsi callback tersedia untuk callback if (typeof callback! == 'function') {callback = false; } while (i) {i -= 1; if (callback) {callback (ditemukan); } node.push (ditemukan); } return node; } // fungsi checkback var hide = function (node) {node.style.display = 'none'; } // Temukan simpul selanjutnya dan sembunyikan di Findnodes eksekusi berikutnya (sembunyikan); // Jalankan Findnodes terlebih dahulu dan kemudian sembunyikan. Tentu saja, fungsi callback juga dapat dibuat saat memanggil fungsi utama: findnodes (function (node) {node.style.display = 'none';});