Jako programista JavaScript możesz spędzić większość czasu na opracowywaniu synchronicznych aplikacji i programów. Niektóre konkretne operacje mogą rozpocząć się tylko wtedy, gdy poprzednie są zakończone w tego rodzaju aplikacjach. Jednak gdy dane są wymagane ze źródła zewnętrznego, takiego jak zewnętrzny interfejs API, często nie mamy pojęcia, kiedy wymagane dane zostaną zwrócone.

W takich przypadkach musisz poczekać na odpowiedź, ale jednocześnie nie chcesz, aby Twoja aplikacja była w stanie zatrzymania, gdy dane są pobierane. Dodanie Funkcje zwrotne są przydatne w tej sytuacji.

Ten zapis wyjaśni funkcje zwrotne w JQuery za pomocą odpowiednich przykładów. A więc zacznijmy!

Funkcje zwrotne w JQuery

Oświadczenia dodane w programie JavaScript są wykonywane sekwencyjnie. Ale kiedy wykorzystujesz efekt w JQuery, wykonanie jego funkcjonalności wymaga czasu; Tymczasem kod dodany w następnych wierszach będzie działał. Aby uniknąć tej sytuacji, JQuery oferuje funkcję wywołania zwrotnego dla każdej metody efektu jQuery.

Funkcja wywołania zwrotnego jest rodzajem funkcji jQuery, która jest wykonywana, gdy metoda dodanego efektów kończy ich działanie. Ta funkcja jest przekazywana jako ostatni argument w określonej metodzie efektu jQuery.

Teraz spójrz na składnię funkcji wywołania zwrotnego w JQuery.

Składnia funkcji wywołania zwrotnego jQuery

$ (selektor).Effect_function (prędkość, wywołanie zwrotne);

W "selektor„Możesz dodać selektor jQuery do wyboru wymaganych elementów HTML i„Effect_function ()„To metoda efektu jQuery, w której musisz przekazać argument„prędkość" I "oddzwonić”Funkcja.

Przykład 1: Korzystanie z funkcji wywołania zwrotnego w JQuery

Po pierwsze, dodamy „Ukryj akapit”Button i akapit w naszym„indeks.html" plik:

Ukryj akapit

To jest akapit z przykładowym tekstem.

W następnym kroku przejdziemy do naszego pliku JavaScript „mój projekt.JS”I napisz w nim następujący kod:

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („p”).ukryj („powolny”, funkcja ()
alert („akapit jest teraz ukryty”);
);
);
);

Teraz, gdy użytkownik kliknie „Ukryj akapit”Przycisk, wybór nazwy elementu JQuery„$ („P”)”Znajdzie i zdobędzie„P”Lub element akapitu, a następnie ukryj go powoli na stronie internetowej. Po zrobieniu tego oddzwonienie ”funkcjonować()”Zostanie wykonane i wyświetla pole alertu w przeglądarce:

Oto GIF, który pokazuje wyniki naszego programu JavaScript:

W przypadku, gdy chcesz sprawdzić, jak ten sam program będzie działał bez funkcji oddzwaniania JQuery, a następnie dodaj poniższy kod w pliku JavaScript:

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („p”).ukryć (1000);
alert („akapit jest teraz ukryty”);
);
);

Bez dodawania funkcji wywołania zwrotnego interpreter JavaScript będzie działał w następujący sposób:

Przykład 2: Korzystanie z funkcji wywołania zwrotnego w jQuery

W tym przykładzie dodamy funkcję wywołania zwrotnego dla „Slidetoggle„Efekt jQuery. Wcześniej dodamy akapit i „Kliknij" przycisk:

To jest przykładowy akapit.

Kliknij

Następnie napisamy następujący kod w naszym „mój projekt.JS" plik:

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („p”).Slidetoggle („powolny”, function ()
alert („Efekt przełącznika slajdów jest już zakończony.");
);
);
);

Powyższy kod określa, że ​​kliknięcie przycisku powoli zsuwa się w dół „P" element. Kiedy to "slidetoggle ()„Efekt kończy się, funkcja wywołania zwrotnego zostanie wykonana, a na stronie internetowej pojawi się pole alertu, stwierdzając, że„Efekt przełączania slajdów jest już zakończony”:

Sprawdź wyjście dostarczonego programu:

Teraz w tym samym „indeks.html”Plik, dodamy nagłówek„ za pomocą „

”Tag:

To się zmierza

Następnie selektor nazwy elementu $ („H1, p”) w pliku JavaScript znajdzie i otrzyma H1 I P elementy. Następnie akapit zostanie ześlizgnięty z „powolny„Prędkość i nagłówek zostaną pokazane w jego pozycji. Na koniec funkcja wywołania zwrotnego wyświetli pole alertu w przeglądarce:

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („h1, p”).Slidetoggle („powolny”, function ()
alert („Efekt przełączania slajdów zakończył się.");
);
);
);

Teraz pole Alert pojawi się dwa razy na stronie internetowej, jeden dla „H1„Kierowanie się, a drugi dla„P„Element akapitowy:

Jak widać z powyższego wyjścia, z powodzeniem zaimplementowaliśmy funkcję wywołania zwrotnego w JQuery.

Wniosek

Funkcja wywołania zwrotnego w jQuery to funkcja wykonywana, gdy metoda dodatkowego efektu zakończy się wykonaniem. W metodzie JQuery Effect funkcja wywołania zwrotnego jest przekazywana w celu odwołania później i jest zwykle określana jako ostatni argument. Ten zapis wyjaśnił funkcje zwrotne w JQuery, a także podaliśmy odpowiednie przykłady związane z wykorzystaniem funkcji zwrotnych.