¿Por qué SetTimeout "se hace cola" cuando se llama a StopTimeOut?

Question

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);
        }
    });

Answer 1

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)

Answer 2

clearTimeout(timeout); Nunca funcionará porque "Tiempo de espera" no es una variable global. Lo estás definiendo dentro de la función.