Perbincangan terperinci tentang kemahiran programming_javascript asynchronous javascript

Masalah yang disebabkan oleh pengaturcaraan asynchronous tidak jelas dalam Javascript sisi klien, tetapi memandangkan Javascript sisi pelayan semakin banyak digunakan, sejumlah besar operasi IO tak segerak menjadikan masalah ini jelas. Terdapat banyak cara yang berbeza untuk menyelesaikan masalah ini, dan artikel ini membincangkan beberapa, tetapi tidak pergi secara mendalam. Setiap orang perlu memilih kaedah yang sesuai dengan mereka mengikut situasi mereka sendiri.

Artikel ini memperkenalkan pengaturcaraan tak segerak dalam js kepada anda secara terperinci Kandungan khusus adalah seperti berikut

1 Perihal peristiwa tak segerak

Acara ialah ciri paling penting dalam JavaScript dan nodej direka bentuk untuk memanfaatkan sifat tak segerak js. Jadi mari kita bercakap tentang mekanisme acara di sini.

Dalam fail js, jika anda ingin menjalankan fungsi tertentu, terdapat dua cara Satu ialah memanggilnya secara terus, seperti foo(), dan yang kedua ialah menggunakan peristiwa untuk mencetuskannya dipanggil fungsi panggil balik, seperti menghantarnya ke fungsi setTimeout dan atribut sedia.

1. Acara dalam fungsi setTimeout adalah tak segerak
setTimeout pada dasarnya adalah peristiwa tak segerak, yang dicetuskan apabila masa kelewatan tamat Namun, kadangkala (sebenarnya, kebanyakan masa) ia tidak akan dilaksanakan mengikut masa kelewatan yang diberikan kod di bawah

  var start = new Date();
  setTimeout(function() {
   console.log('settimeout1:',new Date()-start);
  }, 500);
  while (new Date() - start < 1000) {
   console.log('in while');
  }
  document.getElementById('test').addEventListener('click', function(){
   console.log('test:',new Date()-start);
  }, false)
  for(var i=0;i<10000;i++){
   console.log('in for');
  }
  setTimeout(function(){
   console.log('settimeout2: ',new Date()-start);
  },1000);
  /* 10214
  in while
  index.jsp (第 19 行)
  10000
  in for
  index.jsp (第 25 行)
  settimeout1: 2263
  index.jsp (第 16 行)
  settimeout2: 3239
  index.jsp (第 28 行)
  test: 10006
  index.jsp (第 22 行)
  test: 28175
  index.jsp (第 22 行)
  test: 28791
  index.jsp (第 22 行)
  test: 28966
  index.jsp (第 22 行) */

Mengikut pemahaman biasa, fungsi kelewatan harus mengganggu gelung while selepas 500 milisaat, tetapi sebenarnya tidak, apabila saya mengklik div semasa gelung sementara dan untuk gelung, ujian tidak dikeluarkan dengan serta-merta penerangan yang diberikan Iaitu:

a) Barisan acara. Apabila fungsi setTimeout dipanggil, fungsi panggil balik yang dihantar kepadanya akan ditambah pada baris gilir acara (acara telah dimulakan dan dalam ingatan), dan kemudian kod berikutnya akan terus dilaksanakan sehingga tiada lagi kod boleh dijalankan (di sana bukan aliran larian biasa) (tidak termasuk kandungan tak segerak seperti fungsi acara), acara yang sesuai akan muncul keluar daripada baris gilir acara untuk dijalankan.

b) js adalah satu-benang dan pengendali acara tidak akan berjalan sehingga urutan melahu.

2 Tak segerak acara biasa adalah serupa dengan setTimeout
Dua objek janji dan objek tertunda

1. janji
Promise ialah penyelesaian kepada masalah terlalu banyak fungsi panggil balik bersarang dalam pengaturcaraan tak segerak seperti ajax, yang menjadikan kod itu kabur dan sukar difahami Terutamanya dalam nodej, asynchronous ada di mana-mana. Rangka kerja yang berbeza melaksanakan janji Berikut ialah API janji dalam jquery.

Prinsip pelaksanaan janji tidak akan dibincangkan di sini Prinsip tersebut akan diperkenalkan di ruang lain.

Pengaturcaraan tak segerak ajax tradisional ditulis seperti ini (sebelum jquery1.5):

$.get('url', function(){
 $.get('url1', function(){
  $.get('url2', function(){

  }, 'json');
 }, 'json');
}, 'json');

Menulis kod seperti ini membawa kesukaran besar kepada pembangunan dan penyelenggaraan Nasib baik, selepas jquery1.5 memperkenalkan janji, anda boleh menulisnya seperti ini:

 $.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });

Ia kelihatan lebih mudah sekarang.

2.objek tertunda

var nanowrimoing = $.Deferred();
var wordGoal = 5000;
nanowrimoing.progress(function(wordCount) {
var percentComplete = Math.floor(wordCount / wordGoal * 100);
$('#indicator').text(percentComplete + '% complete');
});
nanowrimoing.done(function(){
$('#indicator').text('Good job!');
});

3. Objek pekerja dan berbilang benang

4. Pemuatan skrip tak segerak

1. Kedudukan skrip tradisional dalam halaman
Skrip dibahagikan kepada dua kategori luas: menyekat dan tidak menyekat. Penyekatan di sini merujuk kepada memuatkan menyekat daripada menjalankan penyekatan.

<!DOCTYPE html>
<html>
<head>
<script src="headScript"></script>
<script defer src="deferredScript"></script>
</head>
<body>
 <script async defer src="chatWidget"></script>
 <script async defer src="asyncScript"></script>
</body>
</html>

Bahagian kod di atas adalah agak standard mengenai kedudukan skrip dalam halaman 1. Skrip utama yang tidak diubah suai ialah skrip menyekat Memandangkan penyemak imbas mentafsir dan melaksanakan JavaScript dari atas ke bawah, Beberapa fail skrip ini akan dilaksanakan pada permulaan, dan DOM tidak akan diberikan sebelum pelaksanaan selesai, tetapi css dalam teg kepala akan dimuatkan. 2. Skrip dengan atribut tangguh akan dimuatkan pada masa yang sama dengan DOM diberikan, tetapi tidak akan dilaksanakan sehingga DOM diberikan Malangnya, tidak semua pelayar menyokong atribut tangguh, jadi jquery (fungsi) dicipta . 3. Apabila kedua-dua atribut async dan atribut defer hadir, defer akan mengatasi async, tetapi apabila async disediakan secara bersendirian, skrip akan dimuatkan dan dijalankan semasa rendering DOM.

2. Pemuatan skrip boleh atur cara
Jika anda tidak memperkenalkan fail js ke dalam halaman dari awal, tetapi memuatkan skrip js secara dinamik melalui interaksi pengguna, anda boleh menambahkannya secara pemrograman.

Terdapat dua cara untuk penyemak imbas mendapatkan skrip pelayan dan melaksanakannya melalui fungsi eval yang lain adalah dengan memasukkan teg menjana permintaan HTTP dan skop kebocoran eval.

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = '/js/feature.js';
head.appendChild(script);
script.onload = function() {
// 现在可以调用脚本里定义的函数了
}

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan asynchronous.