Jawapan Fabrício sangat betul; tetapi saya ingin menambah jawapannya dengan sesuatu yang kurang teknikal, memfokuskan untuk membantu menjelaskan konsep asynchronicity melalui analogi.

Analogi...

Semalam, saya perlu mendapatkan beberapa maklumat daripada rakan sekerja saya untuk kerja yang saya lakukan. Saya memanggilnya; perbualannya seperti ini:

Pada ketika ini, saya meletakkan telefon. Memandangkan saya memerlukan maklumat daripada Bob untuk melengkapkan laporan saya, saya meninggalkan laporan itu, pergi untuk mendapatkan secawan kopi, dan kemudian saya membaca beberapa e-mel. 40 minit kemudian (Bob lambat) Bob menelefon semula dan memberi saya maklumat yang saya perlukan. Pada ketika ini, saya terus membuat laporan saya kerana saya mempunyai semua maklumat yang saya perlukan.

Bayangkan kalau perbualan jadi begini;

Saya duduk di sana dan menunggu. dan menunggu. dan menunggu. 40 minit. Buat apa-apa kecuali tunggu. Akhirnya, Bob memberi saya maklumat, kami menutup telefon, dan saya menyelesaikan laporan saya. Tetapi saya kehilangan produktiviti selama 40 minit.

Ini ialah tingkah laku tak segerak vs segerak

Inilah yang berlaku dalam semua contoh dalam soalan kami. Memuatkan imej, memuatkan fail dari cakera, dan meminta halaman melalui AJAX semuanya adalah operasi yang perlahan (dalam konteks pengkomputeran moden).

JavaScript membolehkan anda mendaftarkan fungsi panggil balik yang akan dilaksanakan apabila operasi perlahan selesai, bukannyamenungguuntuk operasi perlahan ini selesai. Tetapi dalam masa yang sama, JavaScript akan terus melaksanakan kod lain. Hakikat bahawa JavaScript melaksanakankod lainsementara menunggu operasi perlahan selesai menjadikan tingkah lakutak segerak. Jika JavaScript menunggu operasi selesai sebelum melaksanakan sebarang kod lain, ini akan menjadi gelagatsegerak.

var outerScopeVar; var img = document.createElement('img'); // Here we register the callback function. img.onload = function() { // Code within this function will be executed once the image has loaded. outerScopeVar = this.width; }; // But, while the image is loading, JavaScript continues executing, and // processes the following lines of JavaScript. img.src = 'lolcat.png'; alert(outerScopeVar);

Dalam kod di atas, kami meminta JavaScript untuk memuatkanlolcat.png, yang merupakan operasilolcat.png，这是一个sloooow操作。一旦这个缓慢的操作完成，回调函数就会被执行，但与此同时，JavaScript 将继续处理下一行代码；即alert(outerScopeVar)sloooow

未定义；因为alert()Itulah sebabnya kami melihat amaran menunjukkan

alert(outerScopeVar)代码移到回调函数中。因此，我们不再需要将outerScopeVarUntuk membetulkan kod kami, yang perlu kami lakukan ialah mengisytiharkan pembolehubah

var img = document.createElement('img'); img.onload = function() { var localScopeVar = this.width; alert(localScopeVar); }; img.src = 'lolcat.png';

function() { /* Do Something */ }Jadi, dalam semua contoh kami,ialah panggilan balik; untuk membetulkansemua

^{* Secara teknikal anda juga boleh menggunakaneval()，但是eval()kejahatan untuk tujuan ini}

Bagaimana untuk menahan pemanggil?

Anda mungkin mempunyai beberapa kod yang serupa dengan ini;

function getWidthOfImage(src) { var outerScopeVar; var img = document.createElement('img'); img.onload = function() { outerScopeVar = this.width; }; img.src = src; return outerScopeVar; } var width = getWidthOfImage('lolcat.png'); alert(width);

Tetapi, kita tahu sekarang返回outerScopeVar会立即发生；在onload回调函数更新变量之前。这会导致getWidthOfImage()返回undefined，并发出警报undefined.

Untuk membetulkannya, kita perlu membenarkan fungsi memanggilgetWidthOfImage()untuk mendaftarkan panggilan balik dan kemudian mengalihkan amaran lebar di dalam panggilan balik itu

function getWidthOfImage(src, cb) { var img = document.createElement('img'); img.onload = function() { cb(this.width); }; img.src = src; } getWidthOfImage('lolcat.png', function (width) { alert(width); });

...Seperti sebelum ini, ambil perhatian bahawa kami telah dapat mengalih keluar pembolehubah global (dalam kes iniwidth).

Jawapan satu perkataan:Asynchronicity.

Kata Pengantar

Topik ini telah diulang sekurang-kurangnya beribu kali pada Stack Overflow. Jadi pertama saya ingin menunjukkan beberapa sumber yang sangat berguna:

• @Jawapan Felix Kling kepada "Bagaimana untuk membalas respons daripada panggilan tak segerak?". Lihat jawapan cemerlang beliau yang menerangkan proses segerak dan tak segerak, serta bahagian "Menyusun semula kod anda".
  @Benjamin Gruenbaum juga meletakkan banyak usaha untuk menerangkan ketaksinkronan dalam urutan yang sama.

• Jawapan @Matt Esch untuk "Mendapatkan data daripada fs.readFile"juga menerangkan ketidaksegerakan dengan cara yang mudah dengan baik.

Jawapan kepada soalan semasa

Mari kita jejak tingkah laku biasa dahulu. Dalam semua contoh,outerScopeVardiubah suai di dalam fungsi. Fungsi ini jelas tidak dilaksanakan serta-merta; ia ditetapkan atau diluluskan sebagai parameter. Inilah yang kami panggilpanggilan balik.

Sekarang persoalannya, bila panggilan balik ini dipanggil?

Ia bergantung pada situasi tertentu. Mari cuba jejak beberapa gelagat biasa sekali lagi:

• img.onloadMungkin dipanggilpada masa akan datang(jika) imej telah berjaya dimuatkan.
• setTimeoutboleh dipanggilsetTimeout可能会在延迟到期且超时尚未被clearTimeout取消后在将来的某个时间被调用。注意：即使使用0suatu masa pada masa hadapan
selepas kelewatan telah tamat dan tamat masa tidak dibatalkan oleh clearTimeout. Nota: Walaupun semasa menggunakan 0sebagai kelewatan, semua penyemak imbas mempunyai had atas pada kelewatan tamat masa minimum (dinyatakan sebagai 4 milisaat dalam spesifikasi HTML5).
• Apabila (dan jika) permintaan Ajax telah berjaya diselesaikan,pada masa hadapan$.postpanggilan balik jQuery
boleh dipanggil.
• fs.readFileNode.js'boleh dipanggilpada masa hadapan
apabila fail telah berjaya dibaca atau ralat dilemparkan.

Dalam semua kes, kami mempunyai panggilan balik yang mungkin dijalankankadang-kadangpada masa hadapan. "Kadang-kadang pada masa hadapan" inilah yang kami panggilaliran tak segerak

Pelaksanaan tak segerak ditolak keluar daripada proses segerak. Iaitu, semasa tindanan kod segerak sedang dilaksanakan, kod tak segerak akanselamanya

Lebih khusus lagi, apabila enjin JS melahu - tidak melaksanakan sekumpulan (a)kod segerak - ia akan meninjau peristiwa yang mungkin mencetuskan panggilan balik tak segerak (cth. tamat masa, respons rangkaian diterima) dan melaksanakannya satu demi satu. Ini dianggap sebagaigelung peristiwa

Sangat mudah. Logik yang bergantung pada pelaksanaan fungsi async harus dimulakan/dipanggil dari dalam fungsi async tersebut. Contohnya, memindahkanalert和console.logdi dalam fungsi panggil balik akan mengeluarkan hasil yang dijangkakan kerana hasilnya tersedia pada masa itu.

Laksanakan logik panggil balik anda sendiri

Selalunya anda perlu melakukan lebih banyak operasi pada hasil fungsi async, atau melakukan operasi yang berbeza pada hasil bergantung pada tempat fungsi async dipanggil. Mari kita berurusan dengan contoh yang lebih kompleks:

var outerScopeVar; helloCatAsync(); alert(outerScopeVar); function helloCatAsync() { setTimeout(function() { outerScopeVar = 'Nya'; }, Math.random() * 2000); }

Nota:Saya menggunakansetTimeoutdengan kelewatan rawak sebagai fungsi async generik; contoh yang sama berfungsi untuk Ajax, readFile, onload dan sebarang aliran tak segerak yang lain.

Contoh ini nampaknya mempunyai masalah yang sama seperti contoh lain; ia tidak menunggu sehingga fungsi async dilaksanakan.

Mari selesaikan masalah ini dengan melaksanakan sistem panggilan balik kami sendiri. Mula-mula, kita hapuskanouterScopeVaryang hodoh itu, yang sama sekali tidak berguna dalam kes ini. Kemudian kami menambah parameter yang menerima hujah fungsi, panggilan balik kami. Apabila operasi tak segerak selesai, kami memanggil panggilan balik ini dan lulus hasilnya. Perlaksanaan (sila baca komen mengikut urutan):

// 1. Call helloCatAsync passing a callback function, // which will be called receiving the result from the async operation helloCatAsync(function(result) { // 5. Received the result from the async function, // now do whatever you want with it: alert(result); }); // 2. The "callback" parameter is a reference to the function which // was passed as an argument from the helloCatAsync call function helloCatAsync(callback) { // 3. Start async operation: setTimeout(function() { // 4. Finished async operation, // call the callback, passing the result as an argument callback('Nya'); }, Math.random() * 2000); }

Coretan kod untuk contoh di atas:

// 1. Call helloCatAsync passing a callback function, // which will be called receiving the result from the async operation console.log("1. function called...") helloCatAsync(function(result) { // 5. Received the result from the async function, // now do whatever you want with it: console.log("5. result is: ", result); }); // 2. The "callback" parameter is a reference to the function which // was passed as an argument from the helloCatAsync call function helloCatAsync(callback) { console.log("2. callback here is the function passed as argument above...") // 3. Start async operation: setTimeout(function() { console.log("3. start async operation...") console.log("4. finished async operation, calling the callback, passing the result...") // 4. Finished async operation, // call the callback passing the result as argument callback('Nya'); }, Math.random() * 2000); }