chronometer that starts on the button is on top of each other

Question

So I’m beginner and wanted a tip how to do so when click the button do not stay 2 chronometer at the same time one on top of the other believe that with clearInterval solve more I got no idea where to put it

function startTimer(duration, display) {
  var timer= duration, min, sec

  setInterval(function () {
    min = parseInt(timer / 60, 10);
    sec = parseInt(timer % 60, 10);

    min= min<10 ? '0' + min :min;
    sec= sec<10 ? '0' + sec :sec;
    display.textContent = min + ':' + sec;

    if (--timer<0) {
        timer = duration;
    }  
  }, 1000);
}

function iniciarContagem() { 
    var fourmin = 60* 4; //conversão para segundos
    display = document.querySelector('#timer'); //elemento para exibir o timer no document html

    startTimer(fourmin, display); //inicia as functions ou chama as functions
    document.getElementById("btn").onclick = iniciarContagem;
}

<div id="timer"></div>
<input id="btn" type="button" 
       value="Iniciar Contagem" 
       onclick="iniciarContagem()">

Answer 1

You need to "finish" the previous timer before starting a new one using the clearInterval as already mentioned in the question.

You can associate the timer with a variable to facilitate this, and clean the previous one before starting a new one. See the example below, I added comments on the changed points of your code:

// para melhorar a leitura, coloquei todas as variáveis aqui
let timerAtual, timer, min, sec;

function funcaoTimer() {
    min = parseInt(timer / 60, 10);
    sec = parseInt(timer % 60, 10);

    min= min<10 ? '0' + min :min;
    sec= sec<10 ? '0' + sec :sec;
    display.textContent = min + ':' + sec;

    if (--timer<0) {
        timer = duration;
    } 
}

function startTimer(duration, display) {
  timer= duration
  // atribui o timer a variavel "timerAtual" para fazer o clear depois
  timerAtual = setInterval(funcaoTimer, 1000);
}


function pararContagem() {
 if (timerAtual != undefined) {
       console.log("parando contagem");
       clearInterval(timerAtual);
 }
}

function iniciarContagem() { 
    var fourmin = 60* 4; //conversão para segundos
    display = document.querySelector('#timer'); //elemento para exibir o timer no document html
    
    // aqui verifica se já existe o timer e faz o clear ////////
    pararContagem();
    
    startTimer(fourmin, display); //inicia as functions ou chama as functions
    document.getElementById("btn").onclick = iniciarContagem;
}

<div id="timer"></div>
<input id="btn" type="button" 
       value="Iniciar Contagem" 
       onclick="iniciarContagem()">
       
<input id="btn" type="button" 
       value="Parar Contagem" 
       onclick="pararContagem()">       

I put the part of the code that stops the counter in a separate function and put a button to run only that part, so it can beyond restarting the counter, just stop.