Реализация кнопки сброса для таймера обратного отсчета

Question

Привет, ребята, как новичок, я еще не научился писать хороший код, поэтому он не реорганизован, и это фактически код спагетти. В любом случае, я хочу научиться кодировать, поэтому в моем проекте (я изменяю чей-то код) у меня есть два способа установить таймер: 1. Нажимая кнопку в меню навигации, как на рисунке ниже. 2. Введя, как на рисунке ниже.

Этот вопрос я называю функцией таймера два раза

reset.addEventListener('click', function() { 
    timer(mins * 60); 
    timer(seconds); 
}); 

один для кнопок быстрого

var quickTime = function() { 
    seconds = parseInt(this.dataset.time); 
    timer(seconds); 
} 

buttons.forEach((button) => button.addEventListener('click', quickTime)); 

и один для входа.

buttons.forEach((button) => button.addEventListener('click', quickTime)); 
document.customFormSession.addEventListener('submit', function(e) { 
    e.preventDefault(); 
    mins = this.minutesSession.value; 
    displayTimerLeftSession(mins * 60); 
    timer(mins * 60); 
    this.reset(); 

}); 

И имеет смысл, почему он не работает должным образом, потому что один переопределяет другой. Я думаю, что один из вариантов будет проверять, есть ли у быстрой кнопки определенный таймер вызова класса (секунды), иначе таймер вызова (мин. * 60). Однако я не уверен, что это сработает, да еще я не знаю, как его реализовать, и не знаю, где разместить этот код, если он действительно правильный алгоритм. Пожалуйста, если вы знаете, я был бы рад услышать ваши предложения. Если вы можете реализовать это, не стесняйтесь разветвлять project, это будет еще более полезно. Заранее спасибо!

Answer 1

Если я правильно понял ваш вопрос, вы хотите, чтобы кнопка сброса вернулась к правильному времени для обоих методов запуска таймера?

Резюме и быстрое решение:

Просто добавьте seconds = mins * 60 к вашему слушателю customFormSession событий:

document.customFormSession.addEventListener('submit', function(e) { 
    e.preventDefault(); 
    mins = this.minutesSession.value; 
    seconds = mins * 60 
    displayTimerLeftSession(mins * 60); 
    timer(mins * 60); 
    this.reset(); 
}); 

Объяснение:

Вы просто хранить таймер в глобальной переменной называется seconds. Эта переменная задается для вашего быстрого прослушивания событий нажатием кнопки, но не для вашей формы, как указано в сводке.

Честно говоря, я не думаю, что вам нужно даже переменную mins:

document.customFormSession.addEventListener('submit', function(e) { 
    e.preventDefault(); 
    seconds = this.minutesSession.value * 60; 
    displayTimerLeftSession(seconds); 
    timer(seconds); 
    this.reset(); 
}); 

Мои fork of your project

Answer 2

Вы можете создать функцию, которая принимает таймаут в качестве аргумента и возвращает обратный вызов, который запускает таймер при его вызове. Что-то вроде этого:

var createTimerCallback = function (duration) { 
    return function() { 
     // Starts a timer for the duration seconds 
    } 
}; 

Вам нужно прикрепить возвращаемое значение этой функции для всех «быстрых» кнопок:

var durations = [5 * 60, 10 * 60, 15 * 60]; // Or any other constants you need 
var buttons = ... // Your "quick" buttons 
for (var i = 0; i < duration.length; i++) { 
    buttons[i].on('click', createTimerCallback(duration[i])); 
} 

Таким образом, продолжительность захватываются для каждой кнопки и не изменяется ,

Вы можете продолжать обрабатывать форму так, как вы это делаете сейчас: получить количество минут из поля ввода и запустить таймер с указанной продолжительностью.