Explication des fonctions de rappel et de l'asynchronie en JavaScript (exemples de code)

Cet article vous apporte une explication (exemple de code) sur les fonctions de rappel et les fonctions asynchrones en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La première chose à savoir est que les rappels et les fonctions asynchrones ne sont pas la même chose
Je pensais que chaque fonction de rappel dans js est traitée de manière asynchrone. En fait, ce n'est pas le cas. de manière asynchrone.

exemple de rappel

En parlant de rappel, tout le monde a rencontré l'exemple suivant en javascript

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

Ces codes sont utilisés depuis si longtemps, je sais comment le faire. utilisez-les, mais peut-être que le concept de rappel n'est pas si clair

Un autre exemple

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

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

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

Séquence d'exécution :
Exécuter la fonction parent a !
Commencez à appeler la fonction de rappel
Exécutez la fonction de rappel b
Terminez la fonction de rappel

Exécutez la fonction parent a !
Commencer à appeler la fonction de rappel
Exécuter la fonction de rappel anonyme
Terminer la fonction de rappel

Le principe du rappel

En termes simples, passer une fonction en tant que paramètre formel, le ci-dessus Le paramètre de rappel peut être modifié par n'importe quel nom

le rappel est implémenté en C++

rappel sans paramètres

#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;
}

rappel avec paramètres

#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;
}

Exemple asynchrone

Exemple classique

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

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

a();
b();

Séquence d'exécution :
Exécuter a
Exécuter b
setTimeout (exécuter après une seconde)

Principe asynchrone

Nous savons tous que js est monothread. Ce qu'on appelle un seul thread signifie qu'il ne peut effectuer qu'une seule tâche à la fois et que sa méthode de planification des tâches est la mise en file d'attente. Il ne fait aucun doute que cette efficacité n'est pas élevée. Les tâches suivantes doivent attendre que les tâches précédentes soient terminées avant de pouvoir être exécutées. S'il y a une opération fastidieuse, comme une requête ajax, fichier io
Autres langues ​​ouvre souvent un thread pour gérer des tâches aussi chronophages. , mais js lui-même est monothread. La façon dont js gère ce type de tâche est de monter cette tâche une par une, puis d'ajouter la fonction de rappel à la fin du fichier. file d'attente d'exécution une fois la tâche fastidieuse terminée
Donc, dans l'exemple tout à l'heure, même si le délai est défini sur 0, le résultat est le même

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!