Jakie są funkcje zwrotne w JavaScript?

Jeśli jesteś programistą, prawdopodobnie słyszałeś o funkcjach, które są zestawem instrukcji, które wykonują akcję i zwracają wyjście, ale jakie są funkcje zwrotne?

Funkcja odwołania jest niezwykle ważną koncepcją JavaScript i jest szeroko stosowana w obietnice, słuchaczy wydarzeń, tablicach i wielu innych.

Przejdziemy, jakie są funkcje zwrotne i jak używać ich w JavaScript w tym samouczku, a także porozmawiamy o synchronicznych i asynchronicznych funkcjach zwrotnych. Aby mieć jasne i głębokie pojęcia funkcji wywołania zwrotnego, wdrożymy również niektóre przykłady.

Funkcja zwrotnego

Funkcja wywołania zwrotnego jest funkcją przekazaną jako argument do innej funkcji i musi zostać wykonana po instrukcjach zapisanych w tej definicji funkcji i jak sama nazwa wskazuje, jest uruchomiona później w funkcji. Mówiąc prosto, funkcja wywołania zwrotnego jest wykonywana po przetworzeniu bieżącego efektu.

Składnia do pisania funkcji wywołania zwrotnego w JavaScript

Podstawowa składnia to:

funkcja nameFunc (callbackfunc)
callbackfunc ();

To jest Funkcja „namefunc ()” To wymaga Funkcja „callbackfunc ()” jako argument. Funkcja „callbackfunc ()” jest powołany z wewnątrz Funkcja „namefunc ()” Więc jest to rzeczywiście funkcja wywołania zwrotnego.

Przykład 1

Załóżmy, że chcemy pocieszyć.Zaloguj wiadomość po 2 sekund.

Funkcja Message ()
konsola.log („Witaj świat po 2 sekundach”);

Settimeout (wiadomość, 2000);

funkcja settimeout () jest wbudowaną metodą JavaScript, która przyjmuje timer i funkcję zwrotną jako argument. Teraz funkcja komunikatu (funkcja wywołania zwrotnego) zostanie wywołana i zostanie wykonana tylko po wygaśnięciu czasu.

W powyższym kodzie komunikat funkcji () jest przekazywany jako argument i jest nazywany po 2000 milisekund (2 sekundy). Teraz, aby powiązać to z funkcją odwołania, funkcja wiadomości () została wywołana po 2 sekundach. Nie został wykonany przed tymi 2 sekundami. Stąd jest to funkcja zwrotu.

Potrzeba funkcji wywołania zwrotnego?

Musisz myśleć, dlaczego w ogóle potrzebujemy funkcji wywołania zwrotnego. Odpowiedź jest prosta. JavaScript jest językiem sekwencyjnym lub jednowarstwowym, co oznacza, że ​​wykonuje linię sekwencyjnie według linii.

JavaScript nie czeka na odpowiedź przed przejściem do następnego wiersza. Będzie wykonywać i słuchać innych zdarzeń lub wierszy kodu.

Na przykład:

Przykład2

Załóżmy, że logujemy 1 i 2 z dwóch różnych funkcji do konsoli:

funkcja FIRSTMESSAGE ()
konsola.log („1”);

funkcja secondmessage ()
konsola.log („2”);

pierwsza wiadomość();
SecondMessage ();

Wyjście:

1
2

Zgodnie z oczekiwaniami funkcja pierwsza wiadomość() jest wykonywany najpierw, a następnie funkcja secondmessage () jest wykonywany.

Przykład3

Załóżmy, że Metoda FirstMessage () obejmuje żądanie API do pobierania danych z serwera. Będziemy musieli poczekać na odpowiedź/odpowiedź serwera Dlatego skorzystajmy z wbudowanej metody Settimeout jeszcze raz.

Tym razem opóźnimy żądanie o 3 sekundy, aby zobaczyć, w jaki sposób możemy poprosić o żądanie API Fetch.

funkcja FIRSTMESSAGE ()
// Funkcja limitu limitu czasu opóźniania żądania
settimeout (function ()
konsola.log („1”);
, 3000);

funkcja secondmessage ()
konsola.log („2”);

pierwsza wiadomość();
SecondMessage ();

W tym kodzie właśnie przenieśliśmy konsolę.log („1”); w środku funkcja settimeout ().

Teraz naprawdę interesujące jest to, że po uruchomieniu tego kodu zobaczysz, że 2 zostanie wyświetlone pierwsze w konsoli:

Po 3 sekundach zostanie pokazany 1:

Jak widzimy, FIRSTMESSAGE () Funkcja został powołany najpierw, a potem funkcja secondmessage () został wezwany. Nie widzimy jednak wyniku sekwencji, którą nazywaliśmy naszą funkcją.

Nie chodzi o to, że JavaScript nie zwrócił sekwencyjnie naszego kodu, po prostu JavaScript nie czekał na FIRSTMESSAGE () Funkcja Aby całkowicie wykonać i zaczął wykonywać funkcja secondmessage ().

Ten przykład został tutaj umieszczony, aby pokazać, dlaczego potrzebujemy funkcji wywołania zwrotnego. Funkcje oddzwonienia pozwól nam upewnić się, że jakiś kod nie zostanie wykonany, dopóki nasz wymagany kod nie zostanie wykonany.

Typy funkcji wywołania zwrotnego

Teraz, gdy widzieliśmy, jakie są oddzwaniania, w jaki sposób są używane i dlaczego są one ważne, spójrzmy na dwa rodzaje funkcji zwrotnych.

Synchroniczna funkcja wywołania zwrotnego

Synchroniczne funkcje wywołania zwrotnego są uruchamiane/wykonywane w tym samym czasie, co funkcja wyższego rzędu, która korzysta z funkcji zwrotnej i jest głównie blokuje; Dokonuje zadania, a następnie podaje kontrolę innej funkcji lub wiersza kodu.

Jest to korzystne, jak przypuszczasz, że przynosicie przedmioty z interfejsu API. Chcesz, aby Twoja strona załadowała się po pobraniu danych z interfejsu API. O ile odpowiedź z API jest pobierana, cała strona musi poczekać.

Przykład 2 podany powyżej był funkcjami synchronicznymi, ponieważ wykonywał linię według linii, a po wykonaniu pierwszej funkcji dopiero wtedy kontrola została podana do drugiej funkcji I-e SecondMessage () funkcjonować.

Asynchroniczna funkcja wywołania zwrotnego

Asynchroniczny jest całkowicie przeciwny do synchronicznej, ponieważ działa równolegle z dzwoniącym funkcją i funkcją odwołania. Funkcje asynchroniczne nie są blokujące, gdy działają lub wykonują później niż funkcja wyższego rzędu.

Przykład 3 podany powyżej był asynchroniczną funkcją wywołania zwrotnego, jak nazywaliśmy FIRSTMESSAGE () Funkcja ale czekało na dwie sekundy. W tych dwóch sekundach zwrócił kontrolę i funkcja secondmessage () został wykonany. Po upływie trzech sekund, FIRSTMESSAGE () Funkcja Zacząłem ponownie wykonywać.

Wniosek

A Funkcja zwrotnego jest funkcją, która jest najpierw dostarczana jako argument do innej funkcji i musi zostać wykonana po instrukcjach zapisanych w tej definicji funkcji. Nauczyliśmy się, jakie są funkcje zwrotne i jak je używać w JavaScript, a także dlaczego funkcje zwrotne są ważne i jakie są dwa typy funkcji zwrotnych w tym poście.