Как работать с таймерами и задержками в JavaScript

Таймеры и задержки являются важными инструментами в арсенале любого веб-разработчика. В данной статье мы разберем основные функции для работы с таймерами и задержками в JavaScript, а именно: setTimeout(), setInterval() и clearTimeout().

setTimeout()

Функция setTimeout() позволяет выполнить определенный код через заданный интервал времени. Это делает ее полезной для создания задержек в выполнении кода.

Пример использования setTimeout():

function sayHello() {
  console.log("Hello!");
}

setTimeout(sayHello, 3000); // Вызовет функцию sayHello через 3 секунды (3000 миллисекунд)

В данном примере функция sayHello() будет вызвана через 3 секунды после выполнения setTimeout().

setInterval()

Функция setInterval() аналогична setTimeout(), но вместо однократного выполнения кода через заданный интервал времени, она будет выполнять его регулярно через равные промежутки времени.

Пример использования setInterval():

function sayHello() {
  console.log("Hello!");
}

setInterval(sayHello, 2000); // Вызовет функцию sayHello каждые 2 секунды (2000 миллисекунд)

В данном примере функция sayHello() будет вызываться каждые 2 секунды до тех пор, пока не будет остановлена.

🚀 Обратите внимание, что для остановки выполнения setInterval() необходимо использовать функцию clearInterval().

clearTimeout() и clearInterval()

Функции clearTimeout() и clearInterval() используются для остановки выполнения таймеров, созданных с помощью setTimeout() и setInterval() соответственно. Для этого необходимо передать им идентификатор таймера, который возвращается при создании таймера.

Примеры использования clearTimeout() и clearInterval():

function sayHello() {
  console.log("Hello!");
}

// Остановка setTimeout()
const timeoutId = setTimeout(sayHello, 3000);
clearTimeout(timeoutId); // Останавливает выполнение таймера, функция sayHello не будет вызвана

// Остановка setInterval()
const intervalId = setInterval(sayHello, 2000);
clearInterval(intervalId); // Останавливает выполнение таймера, функция sayHello больше не будет вызываться каждые 2 секунды

Теперь вы знаете основы работы с таймерами и задержками в JavaScript и можете использовать эти знания для создания интересных и динамичных веб-приложений. Удачи вам в изучении веб-разработки! 😉