Ulubiony przez wszystkich: koncepcyjny czas na wideo! Wywołania zwrotne to ważna koncepcja w JavaScript. Są to funkcje wywoływane po zakończeniu działania akcji. Następnie nadaj naszemu kodowi strukturę i czas.
Weźmy na przykład animację, której użyliśmy w ostatnim filmie. Uruchomienie animacji zajmuje trochę czasu. A co, jeśli chcesz, aby coś innego wydarzyło się zaraz po zakończeniu tej animacji? Czy musisz zrobić setTimeouttaką samą długość jak animacja? Nie. jQuery daje nam funkcje zwrotne używane tylko do tego celu.
Zwykle są dodatkowym parametrem, który przekazujemy do metody. W przypadku animacji jako ostatni parametr podajemy funkcję. To jest funkcja zwrotna, która zostanie wywołana po zakończeniu animacji.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Może wygląda to trochę dziwnie, ale w zasadzie robimy tylko:
.animate(a, b)Where ajest obiektem właściwości i wartości oraz bfunkcją wywołania zwrotnego.
Ale wiemy z ostatniego filmu, że animacja może również przyjąć parametr czasu, który określa, jak długo będzie trwała animacja. Gdzie to idzie? To opcjonalny parametr, podobnie jak funkcja wywołania zwrotnego. Gdybyśmy chcieli go użyć, umieścilibyśmy go dokładnie pośrodku, więc zasadniczo:
.animate(propertiesObject, duration, callback);Jest też inny opcjonalny parametr, ciąg znaków, który możemy przekazać, aby określić wartość krzywej dynamiki.
.animate(propertiesObject, duration, easing, callback);Tak się składa, że jQuery jest fajny i sprytny, jeśli chodzi o te opcjonalne parametry. Jeśli pominiesz dwie środkowe i po prostu przekażesz wywołanie zwrotne, może powiedzieć, że przekazujesz funkcję, a nie liczbę lub ciąg, więc wie, że masz na myśli funkcję zwrotną. Nie musisz podawać fałszywych wartości ani niczego. To po prostu dobry projekt API!
Kiedy spojrzysz na dokumentację jQuery, pokazują to tak:
.animate (properties (, duration) (, easing) (, complete))
Następnie zaraz po wyjaśnieniu oczekiwanych typów.
W każdym razie wracając do oddzwonień. Możesz uzyskać całkiem zagnieżdżone. Wyobraź sobie, że w funkcji wywołania zwrotnego umieszczasz inną animację, a ta animacja ma swoje własne wywołanie zwrotne. To całkiem rozsądne, ponieważ możesz chcieć zrobić wieloetapową animację. Musisz tylko zachować porządek.
Zobacz pióro 450c5810be27a9a8946cb8012cbd1213 autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Używamy tutaj animacji jako przykładu. Być może jeszcze bardziej powszechnym zastosowaniem funkcji zwrotnych jest Ajax. Ajax ma miejsce, gdy przeglądarka wywołuje inny zasób bez odświeżania strony. To może zająć zupełnie nieznaną ilość czasu. Zależy to od przepustowości i opóźnień oraz rozmiaru pliku i warunków błędów i wszelkiego rodzaju rzeczy. Prawdopodobnie nie możesz nic zrobić z tym żądaniem Ajax, dopóki nie otrzymasz czegoś z powrotem lub w inny sposób więcej informacji. Funkcje zwrotne są do tego idealne i zajmiemy się tym później.