Comment gérer plusieurs problèmes de concurrence dans les compétences JavaScript_javascript

Je rencontre souvent ce scénario lors de l'écriture de code : la page de chargement s'affiche lorsque la page est initialisée, plusieurs requêtes simultanées ajax sont lancées pour obtenir des données, et le chargement se termine au retour de chaque requête ajax.

Par exemple, une page pour passer une commande doit interroger des informations d'adresse communes, des informations sur le produit, des informations sur la ville... et ces requêtes sont asynchrones. On espère que l'utilisateur ne sera pas autorisé à fonctionner tant que toutes les données ne seront pas chargées. .

Un problème facile à rencontrer lors de la mise en œuvre de ce scénario est de savoir comment contrôler la simultanéité multiple ? Voici quelques solutions et idées :

Parallèle remplacé par série

Si la logique métier elle-même est série, mais que la méthode de requête fournie est asynchrone, vous pouvez envisager cette méthode.
Mais ce n’est évidemment pas le cas dans ce scénario. Cela réduit considérablement les performances de la page et prolonge la vitesse de chargement.

Rappel

Convient uniquement aux situations où le nombre de concurrences est faible. Plusieurs niveaux de rappels imbriqués réduiront considérablement la lisibilité du code

.

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

ajax est passé à la synchronisation

Définissez le paramètre async sur false dans jquery

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

Définir le drapeau de fin

Une approche plus simple peut consister à configurer un compteur qui s'incrémente de 1 à chaque fois qu'une fonction asynchrone est terminée, ou à configurer un tableau et à mettre à jour le tableau à chaque fois qu'une fonction asynchrone est exécutée.

Nombre de rappels

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

Boucle bloquée

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

Boucle non bloquante

Il n'est pas recommandé de trop l'utiliser pour éviter d'affecter les performances

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

Mise en œuvre d'un framework tiers

jquery

L'approche actuelle que j'utilise dans mon projet

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 + '已完成');
});

Le contenu ci-dessus est les connaissances pertinentes introduites par l'éditeur sur la façon de gérer plusieurs problèmes de concurrence en JavaScript. J'espère qu'il vous sera utile.