I denne veiledningen vil du lære om JavaScript-tilbakekallingsfunksjoner ved hjelp av eksempler.
En funksjon er en blokk med kode som utfører en bestemt oppgave når den blir ringt. For eksempel,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
I programmet ovenfor sendes en strengverdi som et argument til greet()funksjonen.
I JavaScript kan du også overføre en funksjon som et argument til en funksjon. Denne funksjonen som sendes som et argument inne i en annen funksjon, kalles en tilbakeringingsfunksjon. For eksempel,
// 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);
Produksjon
Hei Peter, jeg er tilbakeringingsfunksjon
I programmet ovenfor er det to funksjoner. Mens du ringer til greet()funksjonen, sendes to argumenter (en strengverdi og en funksjon).
Den callMe()funksjon er en tilbakekallingsfunksjon.
Fordel med tilbakeringingsfunksjon
Fordelen med å bruke en tilbakeringingsfunksjon er at du kan vente på resultatet av en tidligere funksjonsanrop og deretter utføre en ny funksjonsanrop.
I dette eksemplet skal vi bruke setTimeout()metoden til å etterligne programmet som tar tid å utføre, for eksempel data som kommer fra serveren.
Eksempel: Program med 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');
Produksjon
Hei John Hei verden
Som du vet utfører metoden setTimeout () en blokk med kode etter den angitte tiden.
Her greet()kalles funksjonen etter 2000 millisekunder ( 2 sekunder). I løpet av denne ventetiden blir den sayName('John');henrettet. Det er derfor Hello John blir skrevet ut før Hello world.
Ovennevnte kode utføres asynkront (den andre funksjonen; sayName()venter ikke på den første funksjonen; greet()å fullføre).
Eksempel: Bruke en tilbakeringingsfunksjon
I eksemplet ovenfor venter ikke den andre funksjonen til den første funksjonen er fullført. Men hvis du vil vente på resultatet av forrige funksjonsanrop før neste setning utføres, kan du bruke en tilbakeringingsfunksjon. For eksempel,
// 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);
Produksjon
Hei verden Hei John
I programmet ovenfor blir koden utført synkront. Den sayName()funksjon føres som et argument til greet()funksjon.
Den setTimeout()metode utfører den greet()funksjon bare etter 2 sekunder. Men sayName()venter funksjon for gjennomføring av greet()funksjon.
Merk : Tilbakeringingsfunksjonen er nyttig når du må vente på et resultat som tar tid. For eksempel dataene som kommer fra en server fordi det tar tid før data ankommer.
