Метод setTimeout() выполняет функцию через заданное время. Как и setInterval(), этот метод запускается браузером, который асинхронно выполняет код в фоновом режиме. В этой статье мы создаем таймер с формой, которая получает ввод пользователя в качестве параметра и кнопку «Пуск». Таймер объединяется с секундомером, который мы создали с помощью метода setInterval(), и новой функцией оповещения с помощью метода setTimeout().
Начиная с этого HTML-файла:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form id="time" ">
The time ends in: <input type="text" value="3"></input><br>
</form>
<button onclick="getSecond()">Start</button>
<p id = 'demo'></p>
</body>
</html>
О создании формы см.:
# JavaScript HTML Input Examples
1. Создайте функцию getSecond
- Получить время ввода пользователя через
getElementById()
и сохранить значение текстовой переменной. - Перевести текстовую строку в число и сохранить в
i
- Создайте
setInterval()
для обратного отсчета времени до 0 - Создайте setTimeout для ожидания заданных секунд, а затем покажите предупреждение.
- я добавляюi
на 2, потому что подсчет имеет 2-секундную задержку.
function getSecond(){
let x = document.getElementById("time");
let text = "";
text = x.elements[0].value;
document.getElementById("demo").innerHTML = text;
i = Number(text);
let myInterval = setInterval(myTimer, 1000);
let myTimeout = setTimeout(myAlert, (i+2)*1000);
}
2. Создайте функции myTimer и stopTimer
i
— это номер, указанный пользователем.- Когда i меньше 0, таймер прекращает отсчет, вызывая
stopTimer()
- Если i больше нуля, отображается число и уменьшается на 1
function myTimer() {
if (i < 0) {
stopTimer()
} else {
document.getElementById("demo").innerHTML = i;
i--;
}
}
stopTimer()
просто очищает нашsetInterval
ID.
function stopTimer() {
clearInterval(myInterval);
myInterval = null; //clean myInterval
}
3. Создайте функцию myAlert
function myAlert() {
alert('Time is out!');
}