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（无论你存放在哪里），所以你知道你没有待定的计时器。

Cleartimeout不起作用

1 个答案: