Jako webový vývojář je odezva a interaktivita vaší webové aplikace klíčovými součástmi uživatelské zkušenosti. Chcete-li zlepšit uživatelský dojem z vaší aplikace, budete muset přidat dynamické chování a mít kontrolu nad časem, kdy se spouštějí určité části kódu ve vaší aplikaci.
Metoda setTimeout() je k tomu vynikajícím nástrojem, protože vám umožňuje naplánovat provádění kódu, organizovat animace, vytvářet časovače a spravovat asynchronní operace ve vaší aplikaci.
Proto je důležité porozumět syntaxi setTimeout(), jak ji používat a jak ji můžete použít ve svém dalším projektu. Tento článek prozkoumá právě to a vybaví vás správnými znalostmi, které vám umožní maximálně využít metodu setTimeout().
Table of Contents
Funkce setTimeout JavaScriptu
setTimeout() je globální metoda vázaná na objekt okna a používá se k provedení funkce nebo části kódu po určité době. Pokud máte například funkci, kterou chcete provést po čtyřech sekundách, setTimeout() je metoda, kterou byste k tomu použili.
Při použití metoda setTimeout() nastaví časovač, který odpočítává, dokud neuplyne zadaný čas, a poté provede funkci nebo kód, který jste do něj předali.
Být globální metodou znamená, že setTimeout() se nachází v globálním objektu, a je tedy všude dostupný bez nutnosti importu. Na globální objekt, který poskytuje Document Object Model (DOM) v prohlížeči, odkazuje okno s názvem vlastnosti.
Proto můžeme použít window.setTimeout() nebo jednoduše setTimeout() jako globální objektové okno. window.setTimeout() a setTimeout() nemají žádný rozdíl.
Obecná syntaxe pro setTimeout() je následující:
setTimeout(function, delay)
- funkce – jedná se o funkci, která má být provedena po určité době.
- zpoždění – čas v milisekundách, po kterém se má prodaná funkce provést. 1 sekunda odpovídá 1000 milisekundám.
Při použití setTimeout() by měla být zadaná prodleva číselná hodnota, aby se předešlo nežádoucím výsledkům. Argument zpoždění je volitelný. Pokud není zadán, jeho výchozí hodnota je 0 a předaná funkce se provede okamžitě.
setTimeout() vrací jedinečný identifikátor známý jako timeoutID, což je kladné celé číslo, které jednoznačně identifikuje časovač vytvořený při volání metody setTimeout().
Je také důležité poznamenat, že setTimeout() je asynchronní. Jeho časovač nezastaví provádění dalších funkcí v zásobníku volání.
Jak používat setTimeout()
Podívejme se na příklady ukazující, jak používat metodu 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)
Výstup:
Hello World in an arrow function - 1 second Hello World after 3 seconds
Ve výše uvedeném výstupu druhá setTimeout() nejprve odhlásí svůj výstup, protože má kratší zpoždění 1 sekundy ve srovnání s prvním, který má zpoždění 3 sekundy. Jak bylo uvedeno dříve, setTimeout() je asynchronní. Když se zavolá první setTimeout() se zpožděním 3 sekund, spustí se 3sekundový časovač, který však nezastaví provádění dalšího kódu v programu.
Jak metoda odpočítává od 3, provede se zbytek kódu v zásobníku volání. V tomto příkladu je další část kódu druhá setTimeout() se zpožděním 1 sekundy. Protože má mnohem kratší zpoždění, je to důvod, proč je jeho kód spuštěn před prvním setTimeout()
Při použití setTimeout() nemusíte funkci přímo psát v metodě 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: etechblog.cz:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)
Výstup:
Hello there! How are you doing? Yours Sincerely: etechblog.cz:)
Když definujeme metodu jinde, pak ji předáme setTimeout(), to, co předáme do metody setTimeout(), je odkaz na funkci, kterou chceme po daném čase provést.
setTimeout() s dalšími parametry
setTimeout() má alternativní syntaxi, která umožňuje předat další parametry do metody setTimeout(). Tyto parametry budou použity ve funkci, kterou spustíte po zpoždění.
Syntaxe je následující:
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
Můžete předat libovolný počet dalších parametrů v závislosti na počtu argumentů potřebných funkcí, na kterou odkazujete.
Zvažte funkci níže:
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
Pokud chcete provést výše uvedenou funkci po určité době pomocí setTimeout(), můžete to udělat, jak je uvedeno níže:
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");
Výstup:
Hello John, happy coding!
Pamatujte, že pokud definujeme funkci jinde a pak ji předáme do setTimeout(), to, co předáme, je jednoduše odkaz na funkci. Ve výše uvedeném příkladu předáváme referenční pozdrav a nikoli greet(), který volá funkci. Chceme, aby setTimeout() volala funkci pomocí jejího odkazu.
To je důvod, proč nemůžeme přímo předat další parametry, jak je uvedeno níže:
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);
Ve výše uvedeném kódu je funkce pozdravu provedena okamžitě bez čekání na uplynutí 2 sekund. Poté je vyvolána chyba. Výsledek spuštění kódu je uveden níže:
Rušení setTimeout()
Spuštění funkce naplánované pomocí setTimeout() můžeme zabránit pomocí metody clearTimeout(). Taková věc může být nezbytná, pokud jsme nastavili funkci, aby se spustila po určité době, ale nechceme, aby se funkce provedla po splnění určitých podmínek nebo změně podmínek.
Syntaxe metody clearTimeout() je uvedena níže:
clearTimeout(timeoutID)
clearTimeout() přebírá jeden argument, timeoutID, což je jedinečný identifikátor vrácený metodou setTimeout().
Zvažte příklad níže:
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)
Výstup:
2 cleared out Hello after 5 seconds
Funkce text() se neprovede, protože clearTimeout() se používá ke zrušení jejího časového limitu, čímž se zabrání jejímu provedení.
Výhody použití setTimeout()
Mezi výhody použití metody setTimeout() patří:
- Zpoždění spuštění kódu – primární funkcí setTimeout() je umožnit vývojářům zpozdit spuštění kódu. To je zásadní funkce při vytváření animací, správě časovaných událostí a také při řízení toku asynchronního kódu. setTimeout() také uvolní hlavní vlákno pro spuštění jiného kódu.
- Implementace časovače – setTimeout() poskytuje jednoduchý způsob, jak implementovat jednoduché časovače v aplikaci, aniž byste museli používat externí knihovny nebo provádět složité operace s datem.
- Omezování a debouncing – setTimeout() lze použít k omezení počtu volání určitých funkcí nebo provádění akcí, zejména během událostí, jako je posouvání nebo psaní. Při debouncingu vaše aplikace čeká určitou dobu, než zavolá funkci. Omezení omezuje počet volání funkcí uskutečněných v daném časovém období. setTimeout() lze použít k dosažení obojího
- Vylepšení uživatelského zážitku – setTimeout() vám umožňuje zlepšit uživatelský dojem z vaší aplikace řízením, kdy dojde k určitým akcím, například kdy se zobrazí oznámení, výstrahy, vyskakovací zprávy a animace. To je užitečné při předcházení přetížení uživatelů informacemi, čímž se zlepšuje uživatelská zkušenost.
- Zlepšení výkonu webu – setTimeout() lze použít ke zlepšení výkonu a celkové odezvy webových aplikací rozdělením složitých problémů na menší a mnohem jednodušší problémy. Tyto menší problémy lze řešit v rámci setTimeout(), který umožňuje ostatním částem kódu pokračovat ve vykonávání, čímž neovlivňuje výkon nebo odezvu aplikace.
Je zřejmé, že setTimeout() je výkonná a velmi užitečná při vytváření aplikací pomocí JavaScriptu.
Nevýhody použití setTimeout()
Některé z nevýhod použití setTimeout() zahrnují:
- Nepřesné načasování – setTimeout() nemůže zaručit přesný čas, kdy bude funkce zavolána nebo provedena operace. Někdy jiný špatně napsaný kód vede k závodům, které ovlivní činnost setTimeout(). Když použijete více překrývajících se setTimeout()s, nemůžete si být vždy jisti pořadím provádění, zvláště pokud se jedná o jiné asynchronní operace.
- Callback Hell – Pokud máte příliš mnoho vnořených volání setTimeout(), váš kód může být obtížně čitelný a laditelný. Bude také velmi obtížné sledovat tok logiky ve vaší aplikaci. Použití příliš velkého množství setTimeout() může také vést k problémům s pamětí ve vaší aplikaci, pokud nejsou volání setTimeout() zpracována správně.
Zatímco setTimeout() může zabránit některým problémům při jeho používání, tím, že se budete držet osvědčených postupů a osvědčených postupů kódování, můžete minimalizovat nebo úplně předejít nevýhodám vaší aplikace.
Závěr
Metodu setTimeout() lze použít ke zpoždění provádění funkcí. setTimeout se běžně používá pro animace, zpožděné načítání obsahu a zpracování časových limitů pro požadavky.
Můžete například použít setTimeout() k zobrazení upozornění na vašich webových stránkách. Zatímco setTimeout() nezaručuje přesný čas provedení funkce, zaručuje její provedení po nastavené prodlevě.
Můžete také prozkoumat platformy ORM JavaScript pro efektivní kódování.