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');

});

幻灯片开始在鼠标输入中显示，但不要在我离开鼠标时停止。我做错了什么？这是一个范围误解吗？我不知道我错过了什么。

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 (无论您存储它的位置)，这样您就知道您没有挂起的计时器。