Как планировать задачи с помощью setTimeout() и setInterval() в JavaScript
Вступление
Оба setTimeout() и setInterval() являются встроенными методами глобального объекта в объектной модели документа для планирования задач в установленное время.
setTimeout() вызывает переданную функцию один раз после указанной задержки, а setInterval() вызывает её непрерывно в указанное время.
Поскольку JavaScript является однопоточным языком, оба метода позволяют вашему коду выполняться асинхронно.
В этой статье вы узнаете о том, как реализовать setTimeout() и setInterval() в вашем проекте JavaScript.
создайте два файла.
один index.html второй js.js
с таким содержимым:
index.html
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout() и setInterval()</title>
</head>
<body>
<p class="paragraf">
Привет мир!
</p>
<script src="js.js"></script>
</body>
</html>
js.js
Применение setTimeout()
Метод setTimeout() принимает два аргумента: функцию обратного вызова и задержку в миллисекундах, и вызывает функцию один раз.
В вашем js.js файле реализуйте setTimeout() метод и передайте анонимную функцию в качестве первого аргумента и число в миллисекундах в качестве второго аргумента:
setTimeout(() => {
p.innerHTML = "Hello World!";
}, 1000);
После задержки в 1000 миллисекунды (что эквивалентно одной секунде) в параграфе выведет строку Hello World!.
Вы также можете определить функцию глобально и передать её в setTimeout() качестве первого аргумента.
В вашем js.js файле определите функцию в глобальном пространстве и передайте метку функции в setTimeout() методе:
function greeting() {
p.innerHTML = "Hello World!";
}
setTimeout(greeting, 1000);
После задержки в одну секунду в параграфе выведет строку Hello World!.
Примечание.
Вы не должны вызывать функцию, в которую вы передаёте setTimeout().
Вместо этого вставьте метку функции в качестве первого аргумента.
Метод setTimeout() может принимать дополнительные необязательные аргументы и передавать их в функцию обратного вызова после указанной задержки.
В вашем js.js файле примените дополнительные аргументы к вашему setTimeout() методу:
function animal(animalName, punctuation = '.') {
const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);
p.innerHTML = `${name} ${punctuation}`;
}
setTimeout(animal, 2500, 'shark', '!');
Через 2,5 секунды в параграфе выведет сообщение Shark!.
Дополнительный аргумент в вашем setTimeout() методе переопределяет аргумент по умолчанию в animal функции обратного вызова.
Теперь, когда вы ознакомились с setTimeout() методом, давайте рассмотрим другой способ создания асинхронных вызовов в JavaScript.
Применение setInterval()
Подобно setTimeout(), setInterval() метод принимает два аргумента: функцию обратного вызова и задержку в миллисекундах.
Метод также принимает дополнительные аргументы для передачи в функцию обратного вызова.
Разница в том, что setInterval() метод регулярно вызывает функцию обратного вызова с заданной задержкой между вызовами.
В вашем js.js файле определите функцию, которая увеличивает число и регистрирует значение:
let i = 0;
function increment() {
i++;
p.innerHTML = i;
}
setInterval(increment, 1000);
Функция increment обратного вызова, переданная в ваш setInterval() метод, будет запускать ваш код повторно каждую секунду и выводить каждое последующее число в параграф.
Использование setTimeout() рекурсивно
Чтобы иметь больший контроль над определением начала указанных вами задержек, вы можете использовать setTimeout() метод рекурсивно вместо setInterval().
Рекурсивный подход setTimeout() позволяет вашим задачам полностью контролировать время начала задержки.
В вашем js.js файле определите функцию, которая увеличивает число, и примените рекурсивный setTimeout() метод:
let i = 0;
function increment() {
i++;
p.innerHTML = i;
}
let timer = setTimeout(function myTimer() {
increment();
timer = setTimeout(myTimer, 1000);
}, 1000);
Обратите внимание, как вы определяете функцию обратного вызова myTimer в теле первого вызова setTimeout() метода.
Переменная timer переназначает своё значение при втором вызове setTimeout() метода и создаёт рекурсивный подход при вызове метода и передаче myTimer функции в качестве первого аргумента.
При каждом рекурсивном вызове параграф будет регистрировать увеличивающееся число без задержки, так как оба setTimeout() метода имеют второй аргумент 1000.
Теперь, когда вы проанализировали подходы к интеграции обоих методов, давайте рассмотрим, как завершить вызов.
Использование clearTimeout() и clearInterval()
Чтобы отменить setTimeout() метод, вы можете прибегнуть к clearTimeout() методу, переданному в теле вашего setTimeout() вызова.
Метод clearTimeout() принимает функцию обратного вызова в качестве аргумента.
В вашем js.js файле определите функцию и передайте clearTimeout() метод в теле вашего вызова setTimeout():
function animal(animalName, punctuation = '.') {
const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);
p.innerHTML = `${name}${punctuation}`;
}
const animalTimer = setTimeout(animal, 800, 'shark', '!');
setTimeout(() => {
clearTimeout(animalTimer);
}, 250);
Переменная animalTimer присваивает своему значению вызов setTimeout() метода с вашей animal функцией в качестве обратного вызова и второй аргумент с задержкой в 800 миллисекундах.
Ваш второй вызов setTimeout() метода принимает clearTimeout() метод в теле анонимной функции и задержку в 250 миллисекундах.
Когда вы устанавливаете свой clearTimeout() метод, никакое значение не будет регистрироваться в параграфе, поскольку вызов метода и задержка в 250 миллисекундах отменяют значение в animalTimer переменной.
Увеличение количества миллисекунд во втором вызове setTimeout() метода приведёт к регистрации значений в параграфе и завершению экземпляра после выполнения задержки.
Чтобы отменить setInterval() метод, вы можете применить clearInterval() метод.
Аналогично clearTimeout(), clearInterval() метод принимает функцию обратного вызова в качестве аргумента.
В вашем js.js файле используйте clearTimeout() метод в теле вашего вызова setInterval():
let i = 0;
function increment() {
i++;
p.innerHTML = i;
}
const incrementTimer = setInterval(increment, 1000);
setInterval(() => {
clearInterval(incrementTimer);
}, 3000)
Здесь переменная incrementTimer() хранит вызов в setInterval() качестве своего значения.
Второй вызов вашего setInterval() метода определяет анонимную функцию и устанавливает задержку в 3000 миллисекундах.
Вызов также проходит в clearInterval() метод с incrementTimer переменной в качестве аргумента.
Через 3000 миллисекунды параграф зарегистрирует увеличенные значения, и setInterval() метод завершится, как только задержка отработает.
Вывод
Из этой статьи вы узнали, что, поскольку JavaScript читает код построчно, методы setTimeout() и setInterval() предоставляют вам решение для асинхронного запуска вашего кода и выбора времени вызова функции по вашему усмотрению.
setInterval() будет непрерывно выполняться в течение определённого периода времени.
setTimeout() выполняется один раз, но может использоваться рекурсивно для ожидания обратного вызова, чтобы указать, когда он должен ожидать повторного выполнения.
Рекурсивный подход удобен в ситуациях, когда требуется обеспечить выполнение задачи, которая может занять больше времени, чем задержка, прежде чем она будет запущена снова.
