Home / Questions / 6740
Accepted
Luis Alberto Aguilera Clarke
Asked: 2020-04-02 08:21:07 +0800 CST 2020-04-02 08:21:07 +0800 CST

JavaScript setInterval error

  • 772

I have a problem, I have made a function that executes a setInterval.

The first time the function is called it works fine (every second) but when I call it several times, the time goes haywire as if it was executing the ones setIntervalfrom the previous calls.

How can you reset the time so that it always works to one second?

function ejecutar_timer(){
  var valor = 0;
  clearInterval(timerId);
  timerId =  setInterval(function(){
    valor = valor + 1;
  }, 1000);
}
javascript

2 Answers

  1. Best Answer

    The idea is that you use setIntervaland save its ID so that later you can stop it whenever you want using clearInterval. You can achieve this with a global variable.

    I leave you an example using two buttons:

    var timerId = false;

function ejecutarTimer(){
    var valor = 0;
    // Para evitar que se ejecute nuevamente si ya está corriendo
    if (!timerId) {
        timerId = setInterval(function(){
            valor = valor + 1;
            document.getElementById("contador").innerHTML = valor;
        }, 1000);
    }
}

function detenerTimer() {
    clearInterval(timerId);
    timerId = false;
}
    <button onclick="ejecutarTimer()">Iniciar</button>
<button onclick="detenerTimer()">Detener</button>
Contador: <span id="contador">0</span>

    Note that I am validating that the timer is not previously running before creating a new one:

    if (!timerId) {
    // ...
}

    And that I am resetting the timer falseevery time the function is executeddetenerTimer

    • 5

  2. SetInterval executes the function EVERY x milliseconds, it should only be executed once, to be executed only once or to use it recursively it is setTimeout. Then think that the variable value is inside the run_timer function, it can't be accessed from outside.

    • 1