Warum wird SetTimeout "Queuing" -Callbacks beim Aufrufen von Stoptimeout?

Question

Ich habe einen Schieberegler erstellt, der zusammen mit den nächsten/präzisen Pfeilen auf einem Timer arbeitet.

Wenn ein Pfeil angeklickt wird, möchte ich den Auto-Timer stoppen und dann die X-Zeit nach dem letzten Klick neu starten. Leider scheint das, was ich derzeit habe, an Que -Timer zu sein, wenn der Pfeil mehrmals auf den Auto -Timer geklickt wird, bewegt sich aber sehr schnell ...

Ich kann es nicht ausarbeiten - wie man nur einen SetInterval beibehält und vermeide, dass sie aufbauen ...

Jede Hilfe sehr geschätzt - Code unten geklebt

    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

Sie müssen den Hinweis auf die geben timout im gemeinsamen Umfang der click Handler, wie unten gezeigt. Wann var wird in einem neuen Bereich verwendet, die Variable wird im lokalen Bereich erneut deklariert^[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]: Darstellung der Erklärung lokaler/globaler Variablen

Kurz gesagt, Variablen, die von der vorangestellt sind var Das Schlüsselwort wird im lokalen Bereich erneut deklariert. In JavaScript kann neuer Umfang erstellt werden, um einen Block von zu umgeben function() { .. }.

Wenn eine Variable angefordert wird, schaut der Motor zuerst im aktuellen (lokalen) Bereich. Wenn die Variable vorhanden ist, wird diese Variable verwendet.
Andernfalls wird der übergeordnete Bereich usw. usw. untersucht, bis die Variable gefunden wird. Wenn die Variable nicht oben (globaler Umfang) gefunden wird, wird Folgendes auftreten:

• Im strengen Modus a ReferenceError wird geworfen.
• Bei Zuweisung, foo = 1, Die Variable wird im globalen Bereich deklariert
  @Nitpicks: let nicht berücksichtigt)
• Beim Lesen: a ReferenceError wird geworfen.

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); wird niemals funktionieren, weil "Timeout" keine globale Variable ist. Sie definieren es innerhalb der Funktion.