javascript Multiple or Reset countdown function

Question

I want to reset countdown timer in javascript every time I click start. if the countdown is done counting then it is ok, but if the countdown still counting and then I click start again, it will show 2 countdown in the same place(not reset)

enter link description here here is the code

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

You could remember the handle of the setTimeout and cancel it, if you reset your counter:
For this you could declare a global array timer[] which holds for each timer the handle of the timeout (if it is declared). When you starts your countdown you than look if there is a stored handle for this timer and if so, cancle the timeout for it. When you starts the timeout you have to remeber the handle in the timer-array, so you could stop it later. In your resetz-function you need another parameter for the nr of your timer, so you know in the update-function which timer is handled. Here is the code: 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 )}
}

I know this is not a perfect solution but it works. I recommend that you use setInterval instead of the setTimeout, so you get ride of the problem of endless recursion. Now your timer builds with every recursion the stack up and for some bigger values of the time you could get memory-leaks. For this you have to change some more of your code.