Una opción diferente a las que te han proporcionado en otras respuestas podría ser usando la función requestAnimationFrame de javascript, la cual te permite ejecutar (digamos que) "recursivamente" el código que necesites ejecutar:
animate();
function animate() {
requestAnimationFrame(animate);
// Aqui iría el código que quieres que se ejecute iteradamente...
}
requestAnimationFrame retorna un identificador por cada llamado, el cual puedes usar para detener la ejecución del código en el momento en el que lo necesites:
var requestID;
animate();
function animate() {
requestID = requestAnimationFrame(animate);
// El código que quieras ejecutar iteradamente iría aquí.
}
$('#stop').click(function() {
cancelAnimationFrame(requestID);
});
El problema del código anterior es que no se está controlando cada cuánto tiempo se va a ejecutar el código. Lo único que necesitarías hacer sería "emular" el comportamiento de setTimeout o setInterval.
A continuación te presento un ejemplo funcional de como se haría:
Nota: Aquí puedes encontrar información sobre el soporte que tiene requestAnimationFrame en los diferentes navegadores.
(function() {
var requestID;
var i = 0;
var last;
var interval = 2000; // Intervalo en milisegundos
animate();
function animate() {
requestID = requestAnimationFrame(animate);
if (canExecuteCode()) {
// El código que quieres ejecutar:
var node = document.createElement('DIV');
node.innerText = ++i;
document.body.appendChild(node);
}
}
function canExecuteCode() {
if (!last) {
last = Date.now();
return true;
}
var now = Date.now();
var elapsed = now - last;
if (elapsed >= interval) {
last = now;
return true;
}
return false;
}
document.getElementById('stop').addEventListener('click', function() {
if (requestID) {
cancelAnimationFrame(requestID);
requestID = undefined;
}
});
document.getElementById('continue').addEventListener('click', function() {
if (!requestID) animate();
});
})();
<body>
<button id="stop">Stop!</button>
<button id="continue">Continue</button>
</body>