Question

我创建了一个滑块，它可以在计时器上与next / prev箭头一起使用。

单击箭头时，我想停止自动计时器，然后在最后一次单击后重新启动x时间。不幸的是，我目前似乎对计时器进行排队，所以如果多次点击箭头，自动计时器重新启动但移动速度非常快......

我似乎无法解决这个问题 - 如何维护一个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);永远不会起作用，因为“超时”不是全局变量。你在函数中定义它。

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

2 个答案:

[1]：局部/全局变量的图解说明