悬停时刷新 setInterval答案

【问题标题】：Refresh setInterval on Hover悬停时刷新 setInterval
【发布时间】：2013-07-02 13:03:05
【问题描述】：

我有一个 setInterval() 函数，它通过简单地操作一个值，每四秒更改一次页面上的图片。

setInterval(function(){
    changeSlide(slideNumber);
    slideNumber++;
    if(slideNumber===5)slideNumber=0;
},4000);

如您所见，此值为 slideNumber。

现在，我想要什么：

当您在元素上移动 mouseenter(比如说 id="hoverElement") 时，间隔必须停止，因为图片必须保持原位，而我的 changeSlide 会显示和隐藏这些图片。

当你鼠标离开时，它会等待 4000 毫秒并继续。

我该怎么做？

编辑：

对不起，它不起作用

这是我的代码

function slide(){
    slideTimer = setInterval(function(){
        changeSlide(slideNumber);
        slideNumber++;
        if(slideNumber===5)slideNumber=0;
    },4000);
}

slide();

$('#hoverElement').mouseenter(function(){
    clearInterval(slideTimer);
    console.log('mouseenter');
});
$('#hoverElement').mouseleave(function(){
    slide();
    console.log('mouseleave');
});

几乎相同，它不会停止 mouseenter 的间隔。我之前试过你的代码，它也不起作用。

【问题讨论】：

标签： jquery time hover setinterval mouseenter

【解决方案1】：

只需启动并清除悬停间隔：

var timer, slideNumber = 0;

function slide() {
    timer = setInterval(function(){
        changeSlide(slideNumber);
        slideNumber++;
        if(slideNumber===5) slideNumber=0;
    },4000);
}

function unslide() {
    clearInterval(timer);
}

slide();

$('#hoverElement').on({
    mouseenter: unslide,
    mouseleave: slide
});

这是一个DEMONSTRATION 来证明它的工作原理！

【讨论】：