Cara menangani pelbagai isu konkurensi dalam kemahiran JavaScript_javascript

Saya sering menghadapi senario ini semasa menulis kod: halaman pemuatan dipaparkan apabila halaman dimulakan, berbilang permintaan serentak ajax dimulakan untuk mendapatkan data dan pemuatan tamat apabila setiap permintaan ajax kembali.

Sebagai contoh, halaman untuk membuat pesanan perlu menanyakan maklumat alamat biasa, maklumat produk, maklumat bandar...dan permintaan ini adalah tidak segerak pengguna tidak akan dibenarkan beroperasi sehingga semua data dimuatkan .

Masalah yang mudah dihadapi apabila melaksanakan senario ini ialah bagaimana untuk mengawal berbilang konkurensi? Berikut ialah beberapa penyelesaian dan idea:

Sejajar ditukar kepada bersiri

Jika logik perniagaan itu sendiri adalah bersiri, tetapi kaedah permintaan yang disediakan adalah tak segerak, anda boleh pertimbangkan kaedah ini.
Tetapi ini jelas tidak berlaku dalam senario ini. Melakukannya sangat mengurangkan prestasi halaman dan memanjangkan kelajuan pemuatan.

Panggil balik

Hanya sesuai untuk situasi di mana bilangan mata wang adalah kecil Berbilang peringkat panggilan balik bersarang akan mengurangkan kebolehbacaan kod itu dengan ketara

function async1(){
  //do sth...
}
function async2(){
  //do sth...
  async1();
}
async2();

ajax ditukar kepada penyegerakan

Tetapkan parameter async kepada false dalam jquery

$.ajax({
  url:"/jquery/test1.txt",
  async:false
});

Tetapkan bendera akhir

Pendekatan yang lebih mudah ialah dengan menyediakan pembilang yang meningkat sebanyak 1 setiap kali fungsi tak segerak selesai, atau menyediakan tatasusunan dan mengemas kini tatasusunan setiap kali fungsi tak segerak dilaksanakan.

Kira Panggilan Balik

var cnt = 0;
function async1(){
  //do sth...
  callback();
}
function async2(){
  //do sth...
  callback();
}
function callback(){
  cnt++;
  if(2==cnt) console.log('都已执行完毕');
}

Gelung disekat

var cnt = 0;
function async1(){
  //do sth...
  cnt++;
}
function async2(){
  //do sth...
  cnt++;
}
while(2>cnt){}

Gelung tidak menyekat

Tidak digalakkan untuk menggunakannya terlalu banyak untuk mengelakkan menjejaskan prestasi

var cnt = 0;
function async1(){
  //do sth...
  cnt++;
}
function async2(){
  //do sth...
  cnt++;
}
var interval = setInterval(function(){
  if(2===cnt){
    console.log('已执行完成');
    clearInterval(interval)
  }
}

Pelaksanaan rangka kerja pihak ketiga

jquery

Pendekatan semasa yang saya gunakan dalam projek saya

var d1 = $.Deferred();
var d2 = $.Deferred();
function async1(){
  d1.resolve( "Fish" );
}
function async2(){
  d2.resolve( "Pizza" );
}
$.when( d1, d2 ).done(function ( v1, v2 ) {
  console.log( v1 + v2 + '已完成');
});

Kandungan di atas ialah pengetahuan berkaitan yang diperkenalkan oleh editor tentang cara menangani pelbagai isu konkurensi dalam JavaScript. Saya harap ia akan membantu anda.