¿Por qué SetTimeout "se hace cola" cuando se llama a StopTimeOut?
-
27-10-2019 - |
Pregunta
He creado un control deslizante que funciona en un temporizador junto con las flechas Next/Anterior.
Cuando se hace clic en una flecha, quiero detener el temporizador automático y luego reiniciar X-Time después del último clic. Desafortunadamente, lo que tengo actualmente parece que los temporizadores hacen cola, por lo que si la flecha se hace clic varias veces, el temporizador automático se reinicia pero se mueve muy rápido ...
Parece que no puedo resolverlo: cómo mantener solo un setinterval y evitar que se acumulen ...
Cualquier ayuda muy apreciada: código pegado a continuación
var int = setInterval(back, autoTimerTime);
//down arrow
$('.arrow-down').click(function(){
if (!$('ul.as-thumbs').is(':animated')) {
back();
clearInterval(int);
clearTimeout(timeout);
var timeout = setTimeout(function() {
var int = setInterval(back, autoTimerTime);
}, 8000);
}
});
Solución
Tienes que colocar la referencia al timout
En el alcance común del click
manejadores, como se muestra a continuación. Cuando var
se usa en un nuevo alcance, la variable se declara nuevamente, en el alcance local[1].
var int = setInterval(back, autoTimerTime);
var timeout; // This variable is now shared by all $('.arrow-down').click funcs
//down arrow
$('.arrow-down').click(function(){
if (!$('ul.as-thumbs').is(':animated')) {
back();
clearInterval(int);
clearTimeout(timeout);
timeout = setTimeout(function() {
// Removed `var` too
int = setInterval(back, autoTimerTime);
}, 8000);
}
});
1]: Explicación ilustrada de variables locales/globales
En resumen, las variables prefijadas por el var
La palabra clave se declara nuevamente en el alcance local. En JavaScript se puede crear un nuevo alcance rodeando un bloque por function() { .. }
.
Cuando se solicita una variable, el motor se ve por primera vez en el alcance actual (local). Si la variable está presente, se utiliza esta variable.
De lo contrario, se examina el alcance principal, etc., etc., hasta que se encuentra la variable. Si la variable no se encuentra en la parte superior (alcance global), lo siguiente sucederá:
- En modo estricto, un
ReferenceError
será arrojado. - Al asignar,
foo = 1
, la variable se declarará en el alcance global
@Nitpicks:let
no se tiene en cuenta) - Al leer: un
ReferenceError
será arrojado.
var int = 1, timeout = 2, homeless = 3;
function click() {
var timeout = 1;
homeless = 4;
timeout = function() {
var int = 2;
}
}
click();
Variables in the global scope:
- int (declared using var, inititalized at 1)
- timeout (declared using var, inititalized at 2)
- homeless(declared using var, initialized at 3)
--- New scope of: function click()
- No declaratation of `int`, so if used, `int` refers to the global `int`
- Global var: homeless (assigned 4)
- Local var: timeout (declared using var, init at 1)
- Local var: timeout (assigned anonymou function())
--- New scope of: function()
- Local var: int (declared using var, init at 1)
- Accessible vars from parent scope: timeout
- Accessible vars from global scope: homeless, int
(Note that the global `timeout` var is unreachable, because it
has been redeclared at the parent scope)
Otros consejos
clearTimeout(timeout);
Nunca funcionará porque "Tiempo de espera" no es una variable global. Lo estás definiendo dentro de la función.