Ausführliche Erläuterung der Anwendungsbeispiele von Rückruffunktionen und Managern in der asynchronen Javascript-Programmierung

Basierend auf dem Ereignisabfragemechanismus des Browsers (und dem Ereignisabfragemechanismus in Node.js) wird JavaScript häufig in einer asynchronen Umgebung ausgeführt. Aufgrund der Eigenschaften der JavaScript-eigenen Sprache (es ist nicht erforderlich, dass Programmierer Threads/Prozesse steuern) ist es sehr wichtig, die asynchrone Programmierung in js zu lösen. Man kann sagen, dass es für js-Entwickler in einem vollständigen Projekt unmöglich ist, nicht mit asynchronen Vorgängen konfrontiert zu werden.

1. Rückruffunktion

(1) Klassische Rückruffunktionsmethode: verschachtelte Inline-Funktion

Angenommen, wir verfügen über eine ajax()-Methode, die einen URL-Parameter empfängt, eine asynchrone Anfrage an die Adresse initiiert und den zweiten Parameter – eine Rückruffunktion – am Ende der Anfrage ausführt:

ajax(url,function(result){
 console.log(result);
});

Man kann sagen, dass diese Methode die Rückruffunktionsmethode ist, die von fast jedem Front-End-Entwickler verwendet wird. Mit einem solchen Rückrufmechanismus müssen Entwickler keinen Code wie den folgenden schreiben, um zu erraten, wann die Serveranforderung zurückgegeben wird :

var result=ajax(url);
setTimeout(function(result){
 console.log(result);
},400);

Sie sollten verstehen können, was ich hier ausdrücken möchte. Wir stellen einen Timer mit einer Verzögerung von 400 Millisekunden ein und gehen davon aus, dass die von uns gestellte Ajax-Anfrage innerhalb von 400 Millisekunden abgeschlossen wird. Andernfalls operieren wir mit einem undefinierten Ergebnis.

Aber es gibt ein Problem, das mit der Erweiterung des Projekts allmählich auftaucht: Wenn die Szene mehrere Ebenen verschachtelter Rückruffunktionen erfordert, wird es schwierig, den Code zu lesen und zu warten:

ajax(url0,function(result0){
 ajax(result0.url1,function(result1){
  ajax(result1.url2,function(result2){
   console.log(result2);
  });
 });
});

(2) Aufrufen externer Funktionen

Um das Code-Verwirrungsproblem zu lösen, das durch Inline-Callback-Funktionen aufgedeckt wird, führen wir externe Funktionen ein Aufrufe zur Lösung ähnlicher Probleme:

function handle2(result){
 console.log(result);
}
function handle1(result){
 ajax(result.url,function(result){
  handle2(result);
 });
}
ajax(url,function(result){
 handle1(result);
});

Durch die Aufteilung von Inline-Funktionen und den Aufruf externer Funktionen kann diese Optimierungsmethode die Einfachheit des Codes erheblich aufrechterhalten.

2. Entwickeln Sie einen Callback-Manager

Durch die Beobachtung beliebter JavaScript-Prozesssteuerungstools wie Nimble, Step und Seq lernen wir ein einfaches Entwurfsmuster: das Asynchrone Der JavaScript-Ausführungsprozess wird durch den Callback-Manager gesteuert. Das Folgende ist ein wichtiges Codebeispiel eines typischen Callback-Managers:

var Flow={};
//设置next方法，在上一个方法完成时调用下一个方法
Flow.next=function(){
 if(this.stack[0]){
  //弹出方法栈中的第一个方法，并执行他
  this.stack.shift()();
 }
};
//设置series方法，接收一个函数数组，并按序执行
Flow.series=function(arr){
 this.stack=arr;
 this.next();
};

//通过Flow.series我们能够控制传入的函数的执行顺序
Flow.series([
  function(){
   //do something
   console.log(1);
   Flow.next();
  },
  function(next){
   //do something
   console.log(2);
   Flow.next();
  }
]);

Wir initialisieren einen Flow-Controller, zwei Funktionsattribute , Serien und next wurden für ihn entworfen. Innerhalb der von uns geschriebenen Geschäftsmethode wird die nächste Methode sequentiell durch den Aufruf von Flow.next() am Ende der Methode ausgelöst. Asynchrone Funktionen werden sequentiell durch die Ausführung der Serienmethode ausgeführt. Diese Art der Verwaltung asynchroner Funktionsaufrufe über den Kerncontroller vereinfacht unseren Programmierprozess und ermöglicht es Entwicklern, mehr Energie in die Geschäftslogik zu investieren.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele von Rückruffunktionen und Managern in der asynchronen Javascript-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!