4.1 Funkcja setTimeout
Timery w JavaScript pozwalają na wykonywanie określonych działań w zadanych odstępach czasu. Dwa główne metody
do pracy z timerami to setTimeout() i setInterval(). Są one używane do wykonywania
kodu z opóźnieniem lub w regularnych odstępach czasu.
Metoda setTimeout() pozwala wykonać funkcję raz po określonej liczbie milisekund.
To jest przydatne dla opóźnionego wykonania kodu.
Składnia:
const timeoutID = setTimeout(callback, delay, ...args);
Gdzie:
callback: funkcja, która zostanie wykonanadelay: opóźnienie w milisekundach przed wykonaniem funkcjiargs: dodatkowe argumenty, które zostaną przekazane do funkcjicallback
Przykład użycia setTimeout():
// Funkcja, która zostanie wykonana za 2 sekundy
function greet() {
console.log('Hello, world!');
}
// Ustawienie timera
const timeoutID = setTimeout(greet, 2000);
4.2 Anulowanie timera setTimeout
Jeśli chcesz anulować wykonanie funkcji zaplanowane przez setTimeout(), możesz użyć metody clearTimeout():
// Funkcja, która zostanie wykonana za 2 sekundy
function greet() {
console.log('Hello, world!');
}
// Ustawienie timera
const timeoutID = setTimeout(greet, 2000);
// Anulowanie timera
clearTimeout(timeoutID);
Przykład z dodatkowymi argumentami:
// Funkcja, która zostanie wykonana za 2 sekundy z argumentami
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Ustawienie timera z przekazaniem argumentu
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Funkcja setInterval
Metoda setInterval() pozwala na wielokrotne wykonywanie funkcji w zadanych odstępach czasu. Jest to przydatne
dla okresowego wykonywania kodu.
Składnia:
const intervalID = setInterval(callback, delay, ...args);
Gdzie:
callback: funkcja, która będzie wykonywanadelay: interwał w milisekundach między wywołaniami funkcjiargs: dodatkowe argumenty, które zostaną przekazane do funkcjicallback
Przykład użycia setInterval:
// Funkcja, która będzie wykonywana co 2 sekundy
function greet() {
console.log('Hello, world!');
}
// Ustawienie interwału
const intervalID = setInterval(greet, 2000);
4.4 Anulowanie interwału setInterval
Jeśli chcesz zatrzymać wielokrotne wykonywanie funkcji, możesz użyć metody clearInterval().
// Funkcja, która będzie wykonywana co 2 sekundy
function greet() {
console.log('Hello, world!');
}
// Ustawienie interwału
const intervalID = setInterval(greet, 2000);
// Anulowanie interwału po 10 sekundach
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
Przykład z dodatkowymi argumentami:
// Funkcja, która będzie wykonywana co 2 sekundy z argumentami
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Ustawienie interwału z przekazaniem argumentu
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Przykłady praktycznego użycia
Przykład 1: Autonomiczne aktualizowanie czasu
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Aktualizacja czasu co sekundę
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Przykład 2: Okresowe zapytania o dane
// Funkcja do symulacji zapytania o dane
function fetchData() {
console.log('Fetching data...');
// Tutaj można wykonać rzeczywiste zapytanie do serwera
}
// Wykonywanie zapytania o dane co 10 sekund
const intervalID = setInterval(fetchData, 10000);
// Zatrzymanie zapytań po 1 minucie
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
GO TO FULL VERSION