javascript - node - Cambiar el valor de setInterval dinámicamente
reiniciar setinterval javascript (2)
El truco es no usar setInterval , y usar setTimeout en un bucle en su lugar.
setInterval lee el valor de tiempo que le da una vez , las programaciones se basan en este tiempo y se olvida de ello. Lo único que puede hacer es clearInterval(myInterval) si ha asignado su intervalo a una variable como myInterval .
setTimeout es muy similar, excepto que podemos usarlo para realizar un bucle manual en la misma función. El bucle manual nos permite cambiar el tiempo de setTimeout después de cada tiempo de espera.
Aquí hay un ejemplo rápido. Mover el control deslizante hacia la izquierda hace que el tic-tac sea más rápido, y hacia la derecha, más lento.
var timing = 250,
i = 0,
output = document.getElementById(''output'');
function loop() {
i++;
output.innerHTML = i;
window.setTimeout(loop, timing);
}
document.querySelector(''input[type="range"]'').addEventListener(''change'', function (e) {
timing = parseInt(this.value);
});
loop();
<input type="range" min="100" max="500" value="250" />
<div id="output"></div>
Como nota al margen: el uso de este patrón es casi siempre una mejor opción que utilizar setInterval . setInterval corre la posibilidad de que la ejecución de su función pueda tomar más tiempo que la duración del intervalo. Esto nunca sucede con un setTimeout bucle si usted llama a setTimeout última vez en la función.
Documentación:
Quiero cambiar el valor del intervalo de setInterval dinámicamente. Estoy luchando debido a la presencia de un bucle en la función de devolución de llamada setInterval. He visto demasiadas preguntas sobre stackoverflow. Pero no hay ninguna solución que pueda ayudarme. Si alguien sabe responder, por favor explique con un ejemplo. Gracias. Aquí está mi código.
<html>
<head>
<script type="text/javascript">
var speed = 10;
function updateSlider(slideAmount) {
speed = slideAmount;
}
function load() {
downloadUrl("points.xml", function (data) {
/* code */
abc();
});
function abc() {
function track() {
/* code */
downloadUrl("points.xml", function (data) {
var xml = data.responseXML;
var points = xml.documentElement.getElementsByTagName("point");
var i = 0;
setInterval(function () {
if (i != points.length) {
alert(speed);
}
i++;
}, 100 * speed);
});
}
track();
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject(''Microsoft.XMLHTTP'') : new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open(''GET'', url, true);
request.setRequestHeader("Content-type", "text/xml");
request.send(null);
}
function doNothing() {
}
</script>
</head>
<body onload="load();">
<div id="slider">
5% <input id="slide" type="range" min="1" max="20" step="5" value="10" onchange="updateSlider(this.value)" /> 200%
</div>
<div id="chosen">10</div>
</body>
Esta es una versión sin setInterval que siempre uso:
function timer()
{
var timer = {
running: false,
iv: 5000,
timeout: false,
cb : function(){},
start : function(cb,iv,sd){
var elm = this;
clearInterval(this.timeout);
this.running = true;
if(cb) this.cb = cb;
if(iv) this.iv = iv;
if(sd) elm.execute(elm);
this.timeout = setTimeout(function(){elm.execute(elm)}, this.iv);
},
execute : function(e){
if(!e.running) return false;
e.cb();
e.start();
},
stop : function(){
this.running = false;
},
set_interval : function(iv){
clearInterval(this.timeout);
this.start(false, iv);
}
};
return timer;
}
Uso:
var timer_1 = new timer();
timer_1.start(function(){
//magic here
}, 2000, false);
var timer_2 = new timer();
timer_2.start(function(){
//more magic here
}, 3000, true);
//change the interval
timer_2.set_interval(4000);
//stop the timer
timer_1.stop();
El último parámetro de la función de inicio es booleano si la función necesita ejecutarse en 0.
También puede encontrar el script aquí: https://github.com/Atticweb/smart-interval