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

时间:2012-01-12 18:55:20

标签: javascript settimeout setinterval clearinterval

我创建了一个滑块,它可以在计时器上与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);
        }
    });

2 个答案:

答案 0 :(得分:2)

您必须将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)

答案 1 :(得分:1)

clearTimeout(timeout);永远不会起作用,因为“超时”不是全局变量。你在函数中定义它。