4

Tenho uma função em javascript que inicia um cronometro. Quero poder parrar, e recomeçar (reset).

exemplo jsfiddle: http://jsfiddle.net/fk2unkb9/2/

var countms = 0;

function start() {
    var counterms = setInterval(function () {
        countms = countms + 1;
        var id_label_ms = document.getElementById("count_label_ms");
        id_label_ms.innerHTML = countms / 100 + " s";
    }, 1);
}

function stop() {
    clearInterval(counterms);
}

4 Respostas 4

5

A tua ideia está no caminho certo. Tens de colocar o counterms num escopo comum para poderes usar clearInterval(counterms).

Sugiro também retirares var id_label_ms = document.getElementById("count_label_ms"); para fora do setInverval para não pesar na performance. Esse elemento precisas só uma vez, e não a cada 10 milisegundos.

Juntei outras ideias, algumas sugeridas nos comentários aqui.

window.onload = function () {
    var countms = 0;
    var counterms;
    var id_label_ms = document.getElementById("count_label_ms");
    var cronometro = {};
    var ativo = false;

    cronometro.start = function () {
        if (ativo) return;
        ativo = true;
        counterms = setInterval(function () {
            countms = countms + 1;
            id_label_ms.innerHTML = countms / 100 + " s";
        }, 10);
    };

    cronometro.stop = function () {
        clearInterval(counterms);
        ativo = false;
    };

    cronometro.reset = function () {
        cronometro.stop();
        ativo = false;
        id_label_ms.innerHTML = countms = 0;
    };

    ['start', 'stop', 'reset'].forEach(function (tipo) {
        var input = document.querySelector('input[name="' + tipo + '"]');
        input.addEventListener('click', cronometro[tipo]);
    });
};

jsFiddle: http://jsfiddle.net/uj7vr2z7/1/

12
  • Obrigado @sergio e como posso recomecar do 0 (reset) ?
    – akm
    Commented 12/08/2015 às 10:56
  • @akm juntei agora.
    – Sergio
    Commented 12/08/2015 às 10:57
  • não seria melhor colocar o var id_label_ms = document.getElementById("count_label_ms"); fora dos métodos, para não precisar ficar procurando por ele? Commented 12/08/2015 às 11:44
  • @TobyMosque sim, seria melhor. Eu queria dar um exemplo com addEventListener com escopo fechado mas tive de sair e coloco mais logo.
    – Sergio
    Commented 12/08/2015 às 12:59
  • @Sergio também seria interessante travar o botão start quando o cronometro estiver rodando para não bugar o time Commented 12/08/2015 às 13:24
2

Ao meu ver o único problema da solução proposta é que o cronometro setInterval é reagendado no final da execução, então se o intervalo está setado para 10ms e o calculo do tempo e a atualização do label demora 1ms, então a cada 10ms o cronometro vai atrasar 1ms.

então alterei o fiddle do Sergio para tornar esta diferença mais perceptivel:

window.addEventListener("load", function() {
  var count_label_tm = document.getElementById("count_label_tm");
  var count_label_ms = document.getElementById("count_label_ms");

  var btStop = document.getElementById("btStop");
  var btReset = document.getElementById("btReset");
  var btStart = document.getElementById("btStart");

  var dtStart;
  var dtAtual;
  var tmAtual = new Date(0);
  var tmAcumulado = new Date(0);

  var interval = 6;
  var countms = 0;
  var counterms;

  btStop.disabled = true;
  btReset.disabled = true;
  btStart.disabled = false;

  btStart.addEventListener("click", function() {
    btStop.disabled = false;
    btReset.disabled = false;
    btStart.disabled = true;
    
    dtStart = new Date();
    counterms = setInterval(function () {
      countms = countms + interval;
      atualizarInputs();
    }, interval);
  });

  btStop.addEventListener("click", function() {
    btStop.disabled = true;
    btReset.disabled = false;
    btStart.disabled = false;
    
    clearInterval(counterms);
    atualizarInputs();
    tmAcumulado = tmAtual;
  });

  btReset.addEventListener("click", function() {   
    btStop.disabled = true;
    btReset.disabled = true;
    btStart.disabled = false;
    
    countms = 0;
    dtStart = null;
    dtAtual = null;
    tmAtual = new Date(0);
    tmAcumulado = new Date(0);
    
    count_label_ms.innerHTML = '';
    count_label_tm.innerHTML = '';
  });

  function atualizarInputs() {
    dtAtual = new Date();
    tmAtual = new Date(tmAcumulado.getTime() + dtAtual.getTime() - dtStart.getTime());
    setHTML();
  } 


  function setHTML() {
    //usando um contador para registrar os ms
    count_label_ms.innerHTML = formatData(new Date(countms));

    //calculando o tempo gasto usando como base a data de inicio, o tempo acumulado e a data atual.
    count_label_tm.innerHTML = formatData(tmAtual);
  }

  function formatData(time) {
    hours = time.getUTCHours().toString();
    minutes = time.getUTCMinutes().toString();
    seconds = time.getUTCSeconds().toString();
    milliseconds = time.getUTCMilliseconds().toString();

    return "00".substring(0, 2 - hours.length) + hours + ":" +
      "00".substring(0, 2 - minutes.length) + minutes + ":" +
      "00".substring(0, 2 - seconds.length) + seconds + "." +
      "000".substring(0, 3 - milliseconds.length) + milliseconds;
  }
});
<div>
  Count: <label id="count_label_ms"></label>
</div>
<div>
  Datas: <label id="count_label_tm"></label>
</div>
<div>
  <input id="btStop" type=button value="stop" />
  <input id="btReset" type=button value="reset" />
  <input id="btStart" type=button value="start" />
</div>

Certo que o tempo necessário para executar a função do serInterval aumentou devido o aumento da complexabilidade, mas isto ajuda a demostrar a diferença entre as duas abordagens.

1
  • o problema na utilização do Data ao invés de Count é que ele sempre pega o time atual, ou seja o stop não funciona exatamente como deveria Commented 12/08/2015 às 13:34
2

Fiz uma modificação do código para continuar utilizando a sua mesma ideia.

var countms = 0;

var teste;

    var counterms = function() {
    teste = setInterval(function () {
        countms = countms + 1;
        var id_label_ms = document.getElementById("count_label_ms");
        id_label_ms.innerHTML = countms / 100 + " s";
    }, 1);
    }

function start() {
    counterms();
}

function stop() {
    clearInterval(teste);
}

function reset(){
    clearInterval(teste);

    var id_label_ms = document.getElementById("count_label_ms");
    id_label_ms.innerHTML = 0;
}

HTML

<label id=count_label_ms></label>
<br>
<p>
    <input type=button value="stop" onclick="stop()" />
    <input type=button value="reset" onclick="reset()" />
    <input type=button value="start" onclick="start()" />
</p>
2

Pra fazer isso, você precisa criar uma variável que se transporte entre os métodos e que permita sempre retornar as origens:

var countms = 0;
var intervalTxt = null;
function start() {
    var id_label_ms = document.getElementById("count_label_ms");
    if (intervalTxt == null) {
        intervalTxt = setInterval(function() {
            countms = countms + 1;
            id_label_ms.innerHTML =  countms / 100 + " s";
        }, 1);
    }
}

function stop() {
    if (intervalTxt != null) {
        var id_label_ms = document.getElementById("count_label_ms");
        clearInterval(intervalTxt);
        intervalTxt = null;
        id_label_ms.innerHTML =  countms / 100 + " s";
    }
}

function reset() {
    var id_label_ms = document.getElementById("count_label_ms");
    clearInterval(intervalTxt);
    intervalTxt = null;
    id_label_ms.innerHTML = 0 + " s";
}

function resetContinuo() {
    var id_label_ms = document.getElementById("count_label_ms");
    clearInterval(intervalTxt);
    intervalTxt = null;
    countms = 0;
    id_label_ms.innerHTML = 0 + " s";
    start();
}

Aqui um exemplo: http://jsfiddle.net/fk2unkb9/9/
Ou se quiser uma coisa mais interessante usando objeto: http://jsfiddle.net/fk2unkb9/20/
E aqui tem um exemplo mais elaborado: http://jsfiddle.net/fk2unkb9/23/

1
  • Uma dica, no jsfiddle você pode usar a seguinte combinação de teclas para identar o texto de código atual: [Alt] + [A] > [Shift] + [Tab] Commented 13/08/2015 às 11:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .