Umgang mit mehreren Parallelitätsproblemen in JavaScript_Javascript-Kenntnissen

Beim Schreiben von Code stoße ich oft auf dieses Szenario: Die Ladeseite wird angezeigt, wenn die Seite initialisiert wird, mehrere gleichzeitige Ajax-Anfragen werden gestartet, um Daten abzurufen, und der Ladevorgang endet, wenn jede Ajax-Anfrage zurückgegeben wird.

Auf einer Seite zum Aufgeben einer Bestellung müssen beispielsweise allgemeine Adressinformationen, Produktinformationen, Stadtinformationen usw. abgefragt werden. Diese Anforderungen erfolgen asynchron. Es besteht die Hoffnung, dass der Benutzer erst dann arbeiten darf, wenn alle Daten geladen sind .

Ein Problem, das bei der Implementierung dieses Szenarios leicht auftritt, ist die Frage, wie mehrere Parallelitäten gesteuert werden können. Hier sind einige Lösungen und Ideen:

Parallel wurde in seriell geändert

Wenn die Geschäftslogik selbst seriell ist, die bereitgestellte Anforderungsmethode jedoch asynchron ist, können Sie diese Methode in Betracht ziehen.
Dies ist in diesem Szenario jedoch offensichtlich nicht der Fall. Dies verringert die Seitenleistung erheblich und verlängert die Ladegeschwindigkeit.

Rückruf

Nur ​​für Situationen geeignet, in denen die Anzahl der Parallelitäten gering ist. Mehrere Ebenen verschachtelter Rückrufe beeinträchtigen die Lesbarkeit des Codes erheblich.

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

Ajax wurde auf Synchronisierung geändert

Setzen Sie den async-Parameter in jquery auf false

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

Ende-Flag setzen

Ein einfacherer Ansatz kann darin bestehen, einen Zähler einzurichten, der jedes Mal um 1 erhöht wird, wenn eine asynchrone Funktion abgeschlossen wird, oder ein Array einzurichten und das Array jedes Mal zu aktualisieren, wenn eine asynchrone Funktion ausgeführt wird.

Anzahl der Rückrufe

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

Schleife blockiert

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

Schleife nicht blockierend

Es wird nicht empfohlen, es zu oft zu verwenden, um eine Beeinträchtigung der Leistung zu vermeiden

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

Framework-Implementierung von Drittanbietern

jquery

Der aktuelle Ansatz, den ich in meinem Projekt verwende

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

Bei dem oben genannten Inhalt handelt es sich um das vom Herausgeber vorgestellte relevante Wissen zum Umgang mit mehreren Parallelitätsproblemen in JavaScript. Ich hoffe, es wird Ihnen hilfreich sein.