таймер на промисах

Question

решил написать простенький сайт, основная функция которого - таймер. Возникла проблема с работой таймера. Что может быть не так?

 let time = Number(document.getElementById("1".value));

      let timer = (time) =>
        new Promise((resolve, time) =>
          setTimeout(() => {
            resolve();
          }, time * 1000)
        );

      let timer1 = async () => {
        let begintime = "Запущено";
        document.getElementById("result").innerHTML = begintime;
        await timer();
        let endtime = `Таймер на ${time} секунд завершил свою работу`;
        document.getElementById("result").innerHTML = endtime;
      };

       <input
          id="1"
        />
       <button
            onclick="timer1()"
            type="button"
          >
            Запустить
          </button>

        <textarea
          readonly
          id="result"
        ></textarea>
        <label></label>

Answer 1

В коде есть несколько ошибок:

неверно расставлены скобки в строке: let time = Number(document.getElementById("1".value));. Для решения достаточно перенести скобку перед .value: let time = Number(document.getElementById("1").value);
неверно используется конструктор Promise. Функция передаваемая в конструктор принимает два параметра: resolve - функция успешно завершающая Promise, и reject - функция завершающая Promise в состояние reject. В коде в вопросе, для второй функции выбрано имя time, и она передается в качестве параметра time * 1000 - из-за этого время срабатывания кажется неожиданным.
использование одного и того же имени для переменных, и параметров функций. Это приводит к тому, что тяжело понять где переменная, а где параметр, что приводит к неожиданным результатам
функция timer вызывается без параметра, а значит значение ее аргумента undefined, что неверное, даже несмотря на то, что он нигде не используется.
значения из input забирается в самом начале - когда оно еще не задано. Для решения достаточно перенести этот код внутрь функции timer1.

Пример:

let timer = (time) =>
  new Promise((resolve) =>
    setTimeout(() => {
      resolve();
    }, time * 1000)
  );

let timer1 = async() => {
  let time = Number(document.getElementById("1").value);

  let begintime = "Запущено";
  document.getElementById("result").innerHTML = begintime;
  await timer(time);
  let endtime = `Таймер на ${time} секунд завершил свою работу`;
  document.getElementById("result").innerHTML = endtime;
};

<input id="1" />
<button onclick="timer1()" type="button">Запустить</button>

<textarea readonly id="result"></textarea>
<label></label>

БЛОГ НА HUSL

таймер на промисах

Ответы (1 шт):