Почему setTimeout вызывает «обратные вызовы» при вызове stopTimeout? - PullRequest
0 голосов
/ 12 января 2012

Я создал ползунок, который работает с таймером вместе со стрелками next / prev.

При нажатии на стрелку я хочу остановить автоматический таймер, а затем повторно запустить 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);
        }
    });

Ответы [ 2 ]

2 голосов
/ 12 января 2012

Вы должны поместить ссылку на 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 не учитывается)
  • При чтении: 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)
1 голос
/ 12 января 2012

clearTimeout(timeout); никогда не будет работать, потому что «тайм-аут» не является глобальной переменной.Вы определяете это ВНУТРИ функции.

...