javascript Функция многократного или сброса обратного отсчета

Question

Я хочу сбрасывать таймер обратного отсчета в javascript каждый раз, когда нажимаю кнопку «Пуск». если обратный отсчет завершен, тогда все в порядке, но если обратный отсчет все еще отсчитывается, а затем я снова нажимаю кнопку `` Пуск '', он покажет 2 обратных отсчета в том же месте (не сбрасывается)

введите описание ссылки здесь вот код

function countdown( elementName, minute, second )
{
	  var element, endTime, hours, mins, msLeft, time ;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "Alarm";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minute + second) + 500;
    updateTimer();
	//if ( abort == 999 ){msLeft = 0 ;}
}

function resetz(a) {
	if(a==11){countdown( "demo", 0, 10 )}
	if(a==21){countdown( "demo2", 5, 0 )}
}

div {
    /* text-align: center; */
    border: 5px solid #004853;
    display:inline;
    padding: 5px;
    color: #004853;
    font-family: Verdana, sans-serif, Arial;
    font-size: 40px;
    font-weight: bold;
    text-decoration: none;
}

body {
  padding: 20px;
  text-align: center;
}
.btn {
  font-size: 19px;
  position: relative;
  width: 100%;
  background: #004853;
  color: #fff;
  border-radius: .55em;
  transition: all 0.35s ease;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px;
  text-align: center;
  cursor : pointer;
}

<div id="demo" >00:00</div>
<a class="btn" onclick="resetz(11)">START</a> 
<div id="demo2" >00:00</div>
<a class="btn" onclick="resetz(21)">START</a> 

Answer 1

Вы можете запомнить дескриптор setTimeout и отменить его, если сбросите счетчик:
Для этого вы можете объявить глобальный массив timer [], который удерживает для каждого таймера дескриптор тайм-аута (если он объявлен ). Когда вы запускаете обратный отсчет, вы смотрите, есть ли сохраненный дескриптор для этого таймера, и если да, то отмените тайм-аут для него. Когда вы запускаете тайм-аут, вы должны запомнить дескриптор в массиве таймеров, чтобы вы могли остановить его позже. В вашей функции resetz вам нужен еще один параметр для номера вашего таймера, чтобы вы знали в функции обновления, какой таймер обрабатывается. Вот код: https://jsfiddle.net/wxt4dbyo/1/

var timer = [];

function countdown( elementName, minute, second, nr )
{
  if ( timer[nr] ) clearTimeout( timer[nr] );
  var element, endTime, hours, mins, msLeft, time ;

  function twoDigits( n )
  {
    return (n <= 9 ? "0" + n : n);
  }

  function updateTimer()
  {
    msLeft = endTime - (+new Date);
    if ( msLeft < 1000 ) {
        element.innerHTML = "Alarm";
    } else {
        time = new Date( msLeft );
        hours = time.getUTCHours();
        mins = time.getUTCMinutes();
        element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
        timer[nr] = setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
    }
  }

  element = document.getElementById( elementName );
  endTime = (+new Date) + 1000 * (60*minute + second) + 500;
  updateTimer();
}

function resetz(a) {
  if(a==11){countdown( "demo", 0, 10, 1 )}
  if(a==21){countdown( "demo2", 5, 0, 2 )}
}

Я знаю, что это не идеальное решение, но оно работает. Я рекомендую вам использовать setInterval вместо setTimeout, чтобы избавиться от проблемы бесконечной рекурсии. Теперь ваш таймер наращивает стек с каждой рекурсией, и для некоторых больших значений времени вы можете получить утечки памяти. Для этого вам нужно еще немного изменить свой код.