Jako programista stron internetowych, responsywność i interaktywność Twojej aplikacji internetowej są kluczowymi składnikami doświadczenia użytkownika. Aby zwiększyć wygodę użytkownika aplikacji, musisz dodać zachowania dynamiczne i mieć kontrolę nad czasem wykonywania określonych fragmentów kodu w aplikacji.
Metoda setTimeout() jest do tego doskonałym narzędziem, ponieważ pozwala planować wykonywanie kodu, organizować animacje, tworzyć liczniki czasu i zarządzać operacjami asynchronicznymi w aplikacji.
Dlatego ważne jest, aby zrozumieć składnię metody setTimeout(), dowiedzieć się, jak jej używać i jak można ją zastosować w następnym projekcie. W tym artykule omówimy właśnie to i wyposażymy Cię w odpowiednią wiedzę, która pozwoli Ci w pełni wykorzystać metodę setTimeout().
Spis treści:
Funkcja setTimeout JavaScriptu
setTimeout() jest globalną metodą powiązaną z obiektem okna i służy do wykonania funkcji lub fragmentu kodu po określonym czasie. Na przykład, jeśli masz funkcję, którą chcesz wykonać po czterech sekundach, setTimeout() jest metodą, której możesz użyć, aby to osiągnąć.
Gdy jest używana, metoda setTimeout() ustawia licznik czasu, który odlicza czas do upływu określonego czasu, a następnie wykonuje przekazaną mu funkcję lub kod.
Bycie metodą globalną oznacza, że setTimeout() znajduje się w obiekcie globalnym, a zatem jest dostępna wszędzie bez konieczności importowania. Obiekt globalny, który jest dostarczany przez Document Object Model (DOM) w przeglądarce, jest przywoływany przez okno nazwy właściwości.
Dlatego możemy użyć metody window.setTimeout() lub po prostu setTimeout(), ponieważ implikowane będzie globalne okno obiektu. window.setTimeout() i setTimeout() nie mają żadnej różnicy.
Ogólna składnia funkcji setTimeout() jest następująca:
setTimeout(function, delay)
- funkcja – jest to funkcja, która ma zostać wykonana po określonym czasie.
- opóźnienie – czas w milisekundach, po jakim ma zostać wykonana przekazana funkcja. 1 sekunda odpowiada 1000 milisekundom.
Podczas korzystania z funkcji setTimeout() określone opóźnienie powinno być wartością liczbową, aby uniknąć niepożądanych wyników. Argument opóźnienia jest opcjonalny. Jeśli nie jest określony, przyjmuje wartość domyślną 0, a przekazana funkcja jest wykonywana natychmiast.
Funkcja setTimeout() zwraca unikalny identyfikator znany jako timeoutID, który jest dodatnią liczbą całkowitą jednoznacznie identyfikującą licznik czasu tworzony po wywołaniu metody setTimeout().
Należy również zauważyć, że metoda setTimeout() jest asynchroniczna. Jego licznik czasu nie zatrzymuje wykonywania innych funkcji w stosie wywołań.
Jak korzystać z funkcji setTimeout()
Przyjrzyjmy się przykładom pokazującym, jak używać metody setTimeout() :
// setTimeout() with a function declaration
setTimeout(function () {
console.log("Hello World after 3 seconds");
}, 3000)
// setTimeout() with an arrow function
setTimeout(() => {
console.log("Hello World in an arrow function - 1 second")
}, 1000)
Wyjście:
Hello World in an arrow function - 1 second Hello World after 3 seconds
W powyższym wyjściu druga metoda setTimeout() najpierw wylogowuje swoje wyjście, ponieważ ma krótsze opóźnienie wynoszące 1 sekundę w porównaniu z pierwszą, która ma opóźnienie 3 sekund. Jak wspomniano wcześniej, metoda setTimeout() jest asynchroniczna. Po wywołaniu pierwszej metody setTimeout() z opóźnieniem 3 sekund uruchamiany jest 3-sekundowy licznik czasu, ale nie zatrzymuje on wykonywania innego kodu w programie.
Gdy metoda odlicza od 3 w dół, wykonywana jest reszta kodu ze stosu wywołań. W tym przykładzie kolejnym fragmentem kodu jest druga metoda setTimeout() z opóźnieniem 1 sekundy. Ponieważ ma znacznie krótsze opóźnienie, dlatego jego kod jest wykonywany przed pierwszym setTimeout()
Używając setTimeout(), nie musisz bezpośrednio pisać funkcji w metodzie setTimeout().
// function declaration
function greet() {
console.log("Hello there!")
}
// store a function in a variable - function expression
const speak = function () {
console.log("How are you doing?")
}
// using an arrow function
const signOff = () => {
console.log("Yours Sincerely: newsblog.pl:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)
Wyjście:
Hello there! How are you doing? Yours Sincerely: newsblog.pl:)
Kiedy definiujemy metodę w innym miejscu, a następnie przekazujemy ją setTimeout(), to do metody setTimeout() przekazujemy odwołanie do funkcji, którą chcemy wykonać po określonym czasie.
setTimeout() z dodatkowymi parametrami
setTimeout() ma alternatywną składnię, która umożliwia przekazanie dodatkowych parametrów do metody setTimeout() . Parametry te zostaną użyte w funkcji, którą wykonasz po opóźnieniu.
Składnia jest następująca:
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
Możesz przekazać dowolną liczbę dodatkowych parametrów w zależności od liczby argumentów potrzebnych funkcji, do której się odwołujesz.
Rozważ poniższą funkcję:
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
Jeśli chcesz wykonać powyższą funkcję po pewnym czasie za pomocą setTimeout(), możesz to zrobić w sposób pokazany poniżej:
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");
Wyjście:
Hello John, happy coding!
Pamiętaj, że jeśli zdefiniujemy funkcję w innym miejscu, a następnie przekażemy ją do funkcji setTimeout(), to, co przekazujemy, jest po prostu odniesieniem do tej funkcji. W powyższym przykładzie przekazujemy referencję greet, a nie greet(), która wywołuje funkcję. Chcemy, aby setTimeout() był tym, który wywołuje funkcję, używając jej referencji.
Dlatego nie możemy bezpośrednio przekazać dodatkowych parametrów, jak pokazano poniżej:
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);
W powyższym kodzie funkcja powitania jest wykonywana natychmiast, bez czekania na upływ 2 sekund. Wyskakuje wtedy błąd. Wynik wykonania kodu pokazano poniżej:
Anulowanie setTimeout()
Możemy zapobiec wykonaniu funkcji zaplanowanej za pomocą setTimeout() za pomocą metody clearTimeout(). Takie coś może być konieczne, jeśli ustawiliśmy funkcję do wykonywania po określonym czasie, ale nie chcemy, aby funkcja wykonywała się po spełnieniu określonych warunków lub zmianie warunków.
Składnia metody clearTimeout() jest przedstawiona poniżej:
clearTimeout(timeoutID)
clearTimeout() przyjmuje pojedynczy argument, timeoutID, który jest unikalnym identyfikatorem zwracanym przez metodę setTimeout() .
Rozważ poniższy przykład:
function text() {
console.log("This is not going to be printed")
}
function greet() {
console.log("Hello after 5 seconds")
}
// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);
// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)
// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)
Wyjście:
2 cleared out Hello after 5 seconds
Funkcja text() nie jest wykonywana, ponieważ funkcja clearTimeout() jest używana do anulowania jej limitu czasu, co uniemożliwia jej wykonanie.
Zalety korzystania z funkcji setTimeout()
Niektóre z zalet korzystania z metody setTimeout() obejmują:
- Opóźnianie wykonania kodu – podstawową funkcją setTimeout() jest umożliwienie programistom opóźnienia wykonania kodu. Jest to kluczowa funkcja podczas tworzenia animacji, zarządzania zdarzeniami czasowymi, a także kontrolowania przepływu kodu asynchronicznego. setTimeout() zwalnia również główny wątek, aby uruchomić inny kod.
- Implementacja timera – setTimeout() zapewnia prosty sposób implementacji prostych timerów w aplikacji bez konieczności korzystania z zewnętrznych bibliotek lub wykonywania skomplikowanych operacji na datach.
- Throttling i Debouncing – metoda setTimeout() może służyć do ograniczania liczby wywołań określonych funkcji lub wykonywania akcji, szczególnie podczas takich zdarzeń, jak przewijanie lub pisanie. W przypadku odrzucania aplikacja czeka przez określony czas przed wywołaniem funkcji. Ograniczanie ogranicza liczbę wywołań funkcji wykonanych w danym okresie. setTimeout() może być użyty do osiągnięcia obu tych celów
- Popraw doświadczenie użytkownika — funkcja setTimeout() umożliwia poprawę doświadczenia użytkownika w aplikacji poprzez kontrolowanie, kiedy mają miejsce określone działania, takie jak wyświetlanie powiadomień, alertów, wyskakujących komunikatów i animacji. Jest to przydatne w zapobieganiu przeciążeniu użytkowników informacjami, poprawiając w ten sposób wrażenia użytkownika.
- Popraw wydajność sieci — funkcja setTimeout() może być wykorzystana do poprawy wydajności i ogólnej responsywności aplikacji internetowych poprzez rozbicie złożonych problemów na mniejsze, znacznie prostsze problemy. Te mniejsze problemy można rozwiązać w ramach metody setTimeout(), umożliwiając dalsze wykonywanie innych części kodu, nie wpływając w ten sposób na wydajność ani szybkość reakcji aplikacji.
Oczywiście metoda setTimeout() jest zarówno potężna, jak i bardzo przydatna podczas tworzenia aplikacji przy użyciu języka JavaScript.
Wady korzystania z funkcji setTimeout()
Niektóre wady korzystania z funkcji setTimeout() obejmują:
- Niedokładny czas – setTimeout() nie może zagwarantować dokładnego czasu wywołania funkcji lub wykonania operacji. Czasami inny źle napisany kod prowadzi do warunków wyścigu, które wpływają na działanie funkcji setTimeout(). Gdy używasz wielu nakładających się funkcji setTimeout(), nie zawsze możesz być pewien kolejności wykonania, szczególnie jeśli w grę wchodzą inne operacje asynchroniczne
- Callback Hell – Jeśli masz zbyt wiele zagnieżdżonych wywołań setTimeout(), Twój kod może stać się trudny do odczytania i debugowania. Bardzo trudno będzie również śledzić przepływ logiki w aplikacji. Używanie zbyt wielu funkcji setTimeout() może również prowadzić do problemów z pamięcią w aplikacji, jeśli wywołania funkcji setTimeout() nie są obsługiwane prawidłowo.
Podczas gdy metoda setTimeout() może zapobiegać niektórym wyzwaniom podczas korzystania z niej, przestrzegając najlepszych praktyk i dobrych praktyk kodowania, można zminimalizować lub całkowicie uniknąć wad aplikacji.
Wniosek
Metodę setTimeout() można wykorzystać do opóźnienia wykonania funkcji. setTimeout jest powszechnie używany do animacji, opóźnionego ładowania treści i obsługi limitów czasu dla żądań.
Na przykład możesz użyć metody setTimeout() do wyświetlania alertów na swoich stronach internetowych. Podczas gdy setTimeout() nie gwarantuje dokładnego czasu wykonania funkcji, gwarantuje jej wykonanie po ustalonym opóźnieniu.
Możesz także zapoznać się z platformami JavaScript ORM w celu wydajnego kodowania.