Метод 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

  1. Получить время ввода пользователя через getElementById() и сохранить значение текстовой переменной.
  2. Перевести текстовую строку в число и сохранить в i
  3. Создайте setInterval() для обратного отсчета времени до 0
  4. Создайте 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!');
}