Erläuterung von Callback-Funktionen und Asynchronität in JavaScript (Codebeispiele)

Dieser Artikel enthält eine Erklärung (Codebeispiel) zu Rückruffunktionen und asynchronen Funktionen in JavaScript. Ich hoffe, dass er für Sie hilfreich ist.

Das Erste, was man wissen muss, ist, dass Rückrufe und Asynchronität nicht dasselbe sind.
Ich dachte immer, dass jede Rückruffunktion in js asynchron verarbeitet wird. Tatsächlich ist dies nicht der Fall asynchron.

Rückrufbeispiel

Apropos Rückruf, jeder ist auf das folgende Beispiel in Javascript gestoßen

$('#id').on('click', function(){
    //code
});
$('#id').setTimeout(function(){
    //code
},1000);

Diese Codes werden schon so lange verwendet, dass ich weiß, wie man sie verwendet , aber sie sind möglicherweise nicht mit Rückrufen vertraut. Das Konzept ist nicht so klar

Ein weiteres Beispiel

function a(callback) 
{
    alert("执行parent函数a！"); 
    alert("开始调用回调函数"); 
    callback(); 
    alert("结束回调函数"); 
}

function b(){ 
    alert("执行回调函数b"); 
} 

function test() 
{ 
   a(b);
   a(function() { 
        alert("执行匿名回调函数"); 
   }); 
}
test();

Ausführungssequenz:
Führen Sie die übergeordnete Funktion a aus!
Starten Sie den Aufruf der Rückruffunktion
Führen Sie die Rückruffunktion b aus
Beenden Sie die Rückruffunktion

Führen Sie die übergeordnete Funktion a aus!
Starten Sie den Aufruf der Rückruffunktion
Führen Sie die anonyme Rückruffunktion aus
Beenden Sie die Rückruffunktion

Das Rückrufprinzip

Einfach ausgedrückt: Übergeben Sie eine Funktion als formalen Parameter oben Der Callback-Parameter kann in einen beliebigen Namen geändert werden

Callback ist in C++ implementiert

Callback ohne Parameter

#include <iostream>
using namespace std; 

//定义回调函数
void Print() 
{
    cout <<"Hello World!\n";
}

//定义实现回调函数的"调用函数"
void Call(void (*callback)())
{
    callback();
}

//在main函数中实现函数回调
int main(int argc,char* argv[])
{
    Call(Print);
    return 0;
}

Callback mit Parametern

#include <iostream>
using namespace std; 

//定义带参回调函数
void Print(string s) 
{
   cout << s << endl;
}

//定义实现带参回调函数的"调用函数"
void Call(void (*callback)(string),string s)
{
    callback(s);
}

//在main函数中实现带参的函数回调
int main(int argc,char* argv[])
{
    Call(Print,"Hello World!");
    return 0;
}

asynchrones Beispiel

Klassisches Beispiel

function a(){
    console.log('执行a');
    setTimeout(function(){
        console.log('setTimeout');
    }, 1000);
}

function b(){
    console.log('执行b');
}

a();
b();

Ausführungssequenz:
A ausführen
B ausführen
setTimeout (nach einer Sekunde ausführen)

Asynchrones Prinzip

Wir alle wissen, dass js Single-Threaded ist, was bedeutet, dass es jeweils nur eine Aufgabe erledigen kann. Daran besteht kein Zweifel Diese Art von Effizienz ist nicht hoch und nachfolgende Aufgaben müssen warten, bis die Aufgabe abgeschlossen ist. Wenn ein zeitaufwändiger Vorgang vorliegt, z. B. eine Ajax-Anfrage, Datei io
Andere Sprachen ​​Öffnen Sie oft einen Thread, um solche zeitaufwändigen Aufgaben zu erledigen, aber js selbst ist ein einzelner Thread Die zeitaufwändige Aufgabe ist abgeschlossen.
Daher wird im Beispiel gerade das gleiche Ergebnis erzielt, auch wenn die Verzögerungszeit auf 0 gesetzt ist

Das obige ist der detaillierte Inhalt vonErläuterung von Callback-Funktionen und Asynchronität in JavaScript (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!