Таймер обратного отсчета с функцией сброса в чистом Javascript

Это работает для меня, но правильный ли способ создать этот таймер?

Я могу быть наивным в этом отношении, но я думаю, что это близко к идеалу в чистом JS.

В чем будут недостатки использования этого таймера по сравнению с его созданием другим способом?

• Нажмите «Пуск», и таймер начнет обратный отсчет.
• Нажмите «Сброс», и таймер вернется к начальному времени.

HTML:

<button onclick='startStopTimer()'>Start</button>
<button onclick='startStopTimer()'>Reset</button>
<h1>00:10</h1>

JavaScript:

console.clear()
let timer = document.querySelector('h1')
let startingTime = 9
let startTimer;
let startStopTimer = () => {
  if(startTimer){
    clearInterval(startTimer);
    timer.innerHTML = '00:10'
    startingTime = 9
    return startTimer = undefined
  }else{
    return startTimer = setInterval(()=>{
      timer.innerHTML = `00:0${startingTime--}`
    }, 1000)
  }
}

HTML

• Встроенный onClick обработчик событий, прикрепленный к вашему элементу HTML, вероятно, работает нормально; однако есть более эффективные способы обработки событий в чистом JS. В следующий раз добавьте обработчики событий в файл JS следующим образом: element.addEventListener('click', callbackName).
• h1 это заголовок. Я бы не стал помещать значение таймера в этот конкретный тег. я думаю что span здесь будет лучше по семантическим правилам HTML.

JavaScript

• Некоторые из ваших letпеременные на основе могут быть изменены на const. Идея состоит в том, чтобы использовать const всякий раз, когда это возможно. Если это не так, только тогда используйте let.
• innerHTML это опасный метод. Его можно использовать для выполнения XSS-атак. Старайтесь избегать отображения текста на вашем сайте.

Из небольшого обзора;

• Ты используешь 9 дважды, это должно быть присвоено хорошо названной глобальной константе
• Вы жестко кодируете оба 9 и 00:10, это не гибко. Я ожидал, что смогу изменить 9 к 99 и чтобы таймер запускался в 01:40
• По аналогии, 00:0${startingTime--} не допускает большой гибкости в сценарии
• Браузер пытается в честь 1000, но этому нельзя доверять. Вы должны отслеживать исходное начало и вычитать его из текущего времени, чтобы определить, сколько времени прошло. В противном случае таймер ненадежен.
• Размещение таймера в h1 элемент, вероятно, не является хорошей идеей семантически
• Весь ваш код должен быть в хорошо названной (самоисполняющейся) функции
• Я не уверен, почему вы возвращаете что-нибудь в startStopTimer? Если вы никогда не используете возвращаемое значение, просто отбросьте return ключевое слово
• поскольку clearInterval возвращается undefined и поскольку это имеет смысл, я бы выбрал startTimer = clearInterval(startTimer);
• Почему console.clear()? В производственном коде следует избегать console