Javascript, добавляющий параметр паузы в таймер обратного отсчета, не работает
У меня есть функция javascript для обратного отсчета таймера. Поэтому я хочу добавить к этой функции опцию паузы. Я пробовал вот так,
function countdownTimeStart() {
var el = document.getElementById('demo');
var pause= document.getElementById('pause');
var time = [10,10,10];
var x = setInterval(function () {
var hours = time[0];
var minutes = time[1];
var seconds = time[2]--;
if (time[2] == -1) {
time[1]--;
time[2] = 59 }
function pauseTimer() {
savedTime = time;
clearInterval(x);
}
pause.addEventListener( 'click', pauseTimer);
if ( seconds == 0 && minutes == 0 && hours == 0 ){
clearInterval(x);
el.innerHTML = "00:00:00";
} else if (seconds < 10) {
el.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
el.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
}
}, 1000);
}
countdownTimeStart();<button id = "pause" class = "pause">Pause</button>
<div id = "demo"></div>Таймер обратного отсчета работает правильно. Но опция паузы не работает. Так как я могу исправить этот скрипт. Кто-нибудь может мне помочь.
Я преобразовал ваш код в рабочий фрагмент (заменив ваше время массивом предварительно заполненных значений вместо того, чтобы читать его с ввода, но по сути это то же самое), и, похоже, он работает.
Да, теперь он работает! Итак, как я могу возобновить его, когда снова нажмете кнопку паузы. Не могли бы вы добавить это как ответ, я могу отметить его как правильный ответ. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Хотя ваш код работает, я хотел бы отметить пару вещей: добавление обработчика паузы внутри вашего interval - не лучшая идея, вы добавите обработчик паузы каждый интервал, так что в конце вы просто накапливаете сумму функций для обработки при нажатии. Я переключил вашу кнопку и выделил прослушиватель событий в функцию-обработчик, чтобы вы могли прикрепить его к любой кнопке. Эти изменения позволят вашему коду работать плавно, а также упростят его понимание:
function initCountdown() {
function event_click( event ){
// If our interval is null, we need to start the counter
// And also change the innerText so its obvious what the button will do next
if ( interval === null ){
start();
event.target.innerText = 'pause';
} else {
pause();
event.target.innerText = 'start';
}
}
function start(){
// First use pause() to be sure all intervals are cleared
// it prevents them from doubling up
pause();
interval = setInterval( count, 1000 );
}
function pause() {
clearInterval( interval );
interval = null;
}
function count(){
// By doing this before declaring your variables
// you make it so the variables actually hold the new calculated values.
time[2]--;
if ( time[2] == -1 ){
time[1]--;
time[2] = 59;
}
// Lets use some cool new syntax here to reduce the amount of code needed
// this will destructure an array assigning their indexed values to the index of the variable
var [ hours, minutes, seconds ] = time;
if ( seconds == 0 && minutes == 0 && hours == 0 ){
clearInterval( interval );
}
// We always want to print something, and if the values are 0
// the output is still the same, so lets seperate that.
if (seconds < 10) {
outputElement.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
outputElement.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
}
}
// Lets also clearly name our things.
var outputElement = document.getElementById('demo');
var toggleElement = document.getElementById('toggle');
var interval = null;
var time = [10,10,10];
// Add event listener once
toggleElement.addEventListener( 'click', event_click );
toggleElement.click();
}
initCountdown();<button id = "toggle">start</button>
<div id = "demo"></div>Обновлять Добавление кнопки отмены:
function initCountdown() {
function event_click_cancel( event ){
pause();
time = [ 0, 0, 0 ];
print();
}
function event_click_startpause( event ){
// If our interval is null, we need to start the counter
// And also change the innerText so its obvious what the button will do next
if ( interval === null ){
start();
event.target.innerText = 'pause';
} else {
pause();
event.target.innerText = 'start';
}
}
function start(){
// First use pause() to be sure all intervals are cleared
// it prevents them from doubling up
pause();
interval = setInterval( count, 1000 );
}
function pause() {
clearInterval( interval );
interval = null;
}
function print(){
// I have separated out the print function as we want to use it
// in the count and the cancel function
var [ hours, minutes, seconds ] = time;
if ( seconds == 0 && minutes == 0 && hours == 0 ){
clearInterval( interval );
}
if (seconds < 10) {
outputElement.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
outputElement.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
}
}
function count(){
// By doing this before declaring your variables
// you make it so the variables actually hold the new calculated values.
time[2]--;
if ( time[2] == -1 ){
time[1]--;
time[2] = 59;
}
print();
}
// Lets also clearly name our things.
var outputElement = document.getElementById('demo');
var toggleElement = document.getElementById('toggle');
var cancelElement = document.getElementById('cancel');
var interval = null;
var time = [10,10,10];
// Add event listener once
toggleElement.addEventListener( 'click', event_click_startpause );
toggleElement.click();
cancelElement.addEventListener( 'click', event_click_cancel );
}
initCountdown();<button id = "toggle">start</button>
<button id = "cancel">cancel</button>
<div id = "demo"></div>Согласно моему требованию, я хочу возобновить подсчет при повторном нажатии кнопки паузы. Разве это не возможно?
@Chathurika Да, это так, позвольте мне внести небольшую поправку!
отличное решение
Большое спасибо за ваш ответ, действительно полезно.
@Chathurika Я изменил свое решение, чтобы добавить переключатель, опять же, отделенный, поскольку он делает ваш код более многоразовым и, честно говоря, более читаемым и поддерживаемым. Удачи!
Я очень ценю вашу помощь и отличную работу
@somethinghere Я попытался добавить сюда опцию отмены, но тогда скрипт не работает, нельзя ли здесь использовать опцию отмены?
@Chathurika Что должна делать твоя отмена? Это отдельная кнопка сбрасывает таймер? Что убирает таймер? Что вы пытаетесь достичь?
Это отдельная кнопка, при нажатии на нее время должно быть 00:00:00 с остановкой отсчета.
<button id = "cancel"> Отменить </button>
@Chathurika Я обновил свой пост примером отмены. Это заставило меня выделить функцию print, поскольку теперь мы хотим использовать ее где-нибудь еще, а не только в таймере.
Спасибо отличная работа
@somethinghere есть некоторые проблемы этого скрипта, которые я не мог решить самостоятельно. Эта функция обратного отсчета времени также проходит через минусовое значение, поэтому я хочу прекратить отсчет, когда наступит 00:00:00, не могли бы вы помочь мне решить эту проблему.
@Chathurika Это выходит за рамки вопроса, и мне кажется, что я просто делаю этот проект для вас. Однако в моем тестировании счетчик останавливается на нуле, поэтому я не вижу этой проблемы.
Да вы правы, я сам исправлю. Спасибо.
addEvecancel.ntListener( 'click', pauseTimer);Орфография имеет значение.