W tym samouczku dowiesz się o funkcjach zwrotnych JavaScript przy pomocy przykładów.
Funkcja to blok kodu, który po wywołaniu wykonuje określone zadanie. Na przykład,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
W powyższym programie wartość ciągu jest przekazywana jako argument do greet()funkcji.
W JavaScript możesz również przekazać funkcję jako argument do funkcji. Ta funkcja, która jest przekazywana jako argument wewnątrz innej funkcji, nazywana jest funkcją zwrotną. Na przykład,
// 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);
Wynik
Cześć Peter Jestem funkcją oddzwaniania
W powyższym programie są dwie funkcje. Podczas wywoływania greet()funkcji przekazywane są dwa argumenty (wartość ciągu i funkcja).
Ta callMe()funkcja jest funkcją zwrotną.
Zalety funkcji oddzwaniania
Zaletą korzystania z funkcji zwrotnej jest to, że można poczekać na wynik poprzedniego wywołania funkcji, a następnie wykonać kolejne wywołanie funkcji.
W tym przykładzie użyjemy setTimeout()metody do naśladowania programu, którego wykonanie zajmuje dużo czasu, na przykład danych pochodzących z serwera.
Przykład: Program z 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');
Wynik
Witaj John Witaj świecie
Jak wiadomo, metoda setTimeout () wykonuje blok kodu po określonym czasie.
Tutaj greet()funkcja jest wywoływana po 2000 milisekundach ( 2 sekundach). Podczas tego oczekiwania sayName('John');jest wykonywany. Dlatego Hello John jest drukowane przed Hello world.
Powyższy kod jest wykonywany asynchronicznie (druga funkcja; sayName()nie czeka na zakończenie pierwszej funkcji greet()).
Przykład: użycie funkcji oddzwaniania
W powyższym przykładzie druga funkcja nie czeka na zakończenie pierwszej funkcji. Jeśli jednak chcesz poczekać na wynik poprzedniego wywołania funkcji przed wykonaniem następnej instrukcji, możesz użyć funkcji zwrotnej. Na przykład,
// 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);
Wynik
Witaj świecie Witaj John
W powyższym programie kod jest wykonywany synchronicznie. sayName()Funkcja jest przekazywana jako argument do greet()funkcji.
setTimeout()Sposób realizuje greet()funkcję tylko po 2 sekundy. Jednak sayName()funkcja czeka na wykonanie greet()funkcji.
Uwaga : Funkcja wywołania zwrotnego jest pomocna, gdy musisz czekać na wynik, który zajmuje trochę czasu. Na przykład dane pochodzące z serwera, ponieważ ich dotarcie wymaga czasu.
