StopTimeOutが呼び出されたときに、SettimeOutがコールバックを「キューイング」するのはなぜですか？

Question

次の矢印と前の矢印とともにタイマーで動作するスライダーを作成しました。

矢印がクリックされたら、自動タイマーを停止してから、最後のクリック後にX-Timeを再起動します。残念ながら、私が現在持っているものはタイマーをqueするように思われるので、矢印が複数回クリックされた場合、自動タイマーは再起動しますが、非常に速く動きます...

私はそれを解決することができないようです - 1つのセットインターバルだけを維持し、それらを構築することを避ける方法...

あらゆるヘルプが高く評価されています - 以下に貼り付けられたコード

    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

参照を配置する必要があります timout の共通範囲で click 以下に示すように、ハンドラー。いつ var 新しい範囲で使用されているため、変数はローカルスコープで再び宣言されます^[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]：ローカル/グローバル変数の説明された説明

要するに、次のように前に変数があります var キーワードは、ローカルスコープで再び宣言されます。 JavaScriptでは、ブロックを囲むことによって新しいスコープを作成できます function() { .. }.

変数が要求されると、エンジンは最初に現在の（ローカル）範囲を調べます。変数が存在する場合、この変数が使用されます。
それ以外の場合は、変数が見つかるまで親の範囲などが調べられます。変数が上部に見つからない場合（グローバルスコープ）、次のことが起こります。

• 厳密なモードでは、a ReferenceError 投げられます。
• 割り当てるとき、 foo = 1, 、変数はグローバルな範囲で宣言されます
  @nitpicks： let 考慮されていません）
• 読むとき：a ReferenceError 投げられます。

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); 「タイムアウト」はグローバル変数ではないため、決して機能しません。関数内で定義しています。