¿Cómo iniciar y detener / pausar setInterval?

Solución:

Vea la demostración de trabajo en jsFiddle: http://jsfiddle.net/qHL8Z/3/

$(function() {
  var timer = null,
    interval = 1000,
    value = 0;

  $("#start").click(function() {
    if (timer !== null) return;
    timer = setInterval(function() {
      $("#input").val(++value);
    }, interval);
  });

  $("#stop").click(function() {
    clearInterval(timer);
    timer = null
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input id="stop" type="button" value="stop" />
<input id="start" type="button" value="start" />

La razón por la que está viendo este problema específico:

JSFiddle envuelve su código en una función, por lo que start() no está definido en el ámbito global.

---

Moraleja de la historia: no utilice enlaces de eventos en línea. Usar addEventListener/attachEvent.

---

Otras notas:

Por favor no pases cadenas a setTimeout y setInterval. Es eval disfrazada.

En su lugar, usa una función y ponte cómodo con var y espacio en blanco:

var input = document.getElementById("input"),
  add;

function start() {
  add = setInterval(function() {
    input.value++;
  }, 1000);
}

start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />

Como ha etiquetado este jQuery …

Primero, coloque ID en sus botones de entrada y elimine los controladores en línea:

<input type="number" id="input" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>

Luego, mantenga todo su estado y funciones encapsulados en un cierre:

EDITAR actualizado para una implementación más limpia, que también aborda las preocupaciones de @ Esailija sobre el uso de setInterval().

$(function() {
    var timer = null;
    var input = document.getElementById('input');

    function tick() {
        ++input.value;
        start();        // restart the timer
    };

    function start() {  // use a one-off timer
        timer = setTimeout(tick, 1000);
    };

    function stop() {
        clearTimeout(timer);
    };

    $('#start').bind("click", start); // use .on in jQuery 1.7+
    $('#stop').bind("click", stop);

    start();  // if you want it to auto-start
});

Esto asegura que ninguna de sus variables se filtre al alcance global y no se pueda modificar desde afuera.

(Actualizado) demostración de trabajo en http://jsfiddle.net/alnitak/Q6RhG/

---

---

Utiliza Nuestro Buscador