为什么 setTimeout 会“排队”？调用 stopTimeout 时回调？

Question

我创建了一个滑块，它可以与下一个/上一个箭头一起用于计时器。

单击箭头时，我想停止自动计时器，然后在最后一次单击后重新启动 x-time。不幸的是，我目前所拥有的似乎是计时器，所以如果多次单击箭头，自动计时器会重新启动，但移动速度非常快......

我似乎无法解决这个问题 - 如何仅维护一个 setInterval 并避免它们累积。 ..

非常感谢任何帮助 - 下面粘贴的代码

    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() { .. } 包围一个块来创建新作用域。

当请求变量时，引擎首先在当前（本地）范围中查找。如果该变量存在，则使用该变量。
否则，将检查父作用域等，直到找到变量。如果在顶部（全局范围）没有找到该变量，则会发生以下情况：

• 在严格模式下，将抛出 ReferenceError。
• 赋值时，foo = 1，该变量将在全局范围内声明
  
  @Nitpicks：不考虑 let）
• 读取时：将抛出 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); 永远不会起作用，因为“timeout”不是全局变量。您在函数内定义它。