Cleartimeout не будет работать

Question

Я пытаюсь улучшить this plugin Добавление обработчиков событий для переключения воспроизведения/остановки, когда вы наведите указатель мыши на мышь. Я видел множество людей, имеющих ту же проблему с функцией js setTimeout и clearTimeout, и у меня тоже проблемы. Это то, что у меня есть

var autoplay; 
container.mouseenter(function(){ 
    autoplay = setTimeout(function() { 
     slide('next'); 
    }, config.auto); 
    console.log('play'); 
}).mouseleave(function(){ 
    clearTimeout(autoplay); 
    console.log('stop'); 

}); 

Слайды начинают появляться в MouseEnter, но не остановить, когда я делаю MouseLeave. Что я делаю неправильно? Это недоразумение в сфере охвата? Я не знаю, чего мне не хватает.

Answer 1

я не вижу никаких причин, почему ваш код не будет работать при условии, container имеет точно один согласованный элемент в ней (working example). Если есть вероятность, что он может соответствовать более чем одному элементу, тогда у вас будет несколько элементов, разделяющих один и тот же дескриптор таймера autoplay, и это станет немного беспорядком. Если это так, используйте data для хранения ручки фактически на элементе событие мыши произошло:

container.mouseenter(function(){ 
    $(this).data("autoplay", setTimeout(function() { 
     slide('next'); 
    }, config.auto)); 
    console.log('play'); 
}).mouseleave(function(){ 
    var autoplay = $(this).data("autoplay"); 
    if (autoplay) { 
     clearTimeout(autoplay); 
    } 
    console.log('stop'); 
}); 

Live example

отдельно, это, вероятно, стоит клиринговых autoplay (там, где вы храните его), когда срабатывает таймер, так вы знаете, что у вас нет ожидающего таймера.