In deze zelfstudie leert u met behulp van voorbeelden over JavaScript-callback-functies.
Een functie is een codeblok dat een bepaalde taak uitvoert wanneer deze wordt aangeroepen. Bijvoorbeeld,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
In het bovenstaande programma wordt een stringwaarde als argument aan de greet()functie doorgegeven .
In JavaScript kunt u ook een functie als argument aan een functie doorgeven. Deze functie die wordt doorgegeven als een argument binnen een andere functie, wordt een callback-functie genoemd. Bijvoorbeeld,
// function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);
Uitvoer
Hallo Peter, ik ben terugbelfunctie
In het bovenstaande programma zijn er twee functies. Bij het aanroepen van de greet()functie worden twee argumenten (een stringwaarde en een functie) doorgegeven.
De callMe()functie is een callback-functie.
Voordeel van de terugbelfunctie
Het voordeel van het gebruik van een callback-functie is dat u kunt wachten op het resultaat van een eerdere functieaanroep en vervolgens een andere functieaanroep kunt uitvoeren.
In dit voorbeeld gaan we de setTimeout()methode gebruiken om het programma na te bootsen dat tijd nodig heeft om uit te voeren, zoals gegevens die van de server komen.
Voorbeeld: programma met setTimeout ()
// program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');
Uitvoer
Hallo John Hallo wereld
Zoals u weet, voert de methode setTimeout () een codeblok uit na de opgegeven tijd.
Hier wordt de greet()functie aangeroepen na 2000 milliseconden ( 2 seconden). Tijdens deze wachttijd wordt de sayName('John');uitgevoerd. Dat is de reden waarom Hallo John wordt gedrukt vóór Hallo wereld.
De bovenstaande code wordt asynchroon uitgevoerd (de tweede functie; sayName()wacht niet op de eerste functie; greet()om te voltooien).
Voorbeeld: een terugbelfunctie gebruiken
In het bovenstaande voorbeeld wacht de tweede functie niet totdat de eerste functie is voltooid. Als u echter wilt wachten op het resultaat van de vorige functieaanroep voordat de volgende instructie wordt uitgevoerd, kunt u een callback-functie gebruiken. Bijvoorbeeld,
// Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);
Uitvoer
Hallo wereld Hallo John
In het bovenstaande programma wordt de code synchroon uitgevoerd. De sayName()functie wordt als argument aan de greet()functie doorgegeven .
De setTimeout()methode voert de greet()functie pas na 2 seconden uit. De sayName()functie wacht echter op de uitvoering van de greet()functie.
Opmerking : de callback-functie is handig als u moet wachten op een resultaat dat tijd kost. De gegevens komen bijvoorbeeld van een server omdat het even duurt voordat gegevens binnenkomen.
