Pourquoi setTimeout « faire la queue » callbacks quand stopTimeout est appelé?

Question

J'ai créé un curseur qui fonctionne sur une minuterie, avec des flèches suivant / précédent.

Quand une flèche est cliqué, je veux arrêter le chronomètre automatique puis redémarrer x temps après le dernier clic. Malheureusement, ce que je semble actuellement minuteries Qué si la flèche est cliqué plusieurs fois l'horloge redémarre automatique mais se déplace très vite ...

Je ne peux pas sembler travailler dehors - comment maintenir juste un setInterval et éviter de les construire ...

Toute aide grandement appréciée - collé sous le code

    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

Vous devez placer la référence au timout dans le cadre commun des gestionnaires de click, comme indiqué ci-dessous. Lorsque var est utilisé dans une nouvelle portée, la variable est déclarée à nouveau, dans la portée locale ^[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]: explication illustrée de variables locales / globales

En bref, les variables préfixées par le mot-clé var sont déclarés à nouveau dans la portée locale. de nouvelles possibilités en JavaScript peut être créé par un bloc entourant par function() { .. }.

Quand une variable est demandée, le moteur regarde d'abord dans le périmètre actuel (local). Si la variable est présente, cette variable est utilisée.
Dans le cas contraire, le champ parent est examiné, etc, etc, jusqu'à ce que la variable se trouve. Si la variable ne se trouve pas au sommet (portée mondiale), ce qui se passera:

• En mode strict, une ReferenceError sera levée.
• Lors de l'attribution, foo = 1, la variable sera déclarée à la portée mondiale
  @Nitpicks: let pas pris en compte)
• Lors de la lecture. Un ReferenceError sera jeté

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); ne fonctionnera jamais car « délai d'attente » n'est pas une variable globale. Vous définir dans la fonction.