在hover时停止jQuery循环function

我有一个名为testimonials()的函数，它基本上循环遍历一组div，而它动画div，将其动画化并为下一个动画制作动画。

现在，我希望一旦鼠标在它上面就停止当前的DIV，否则称为hover它。 我使用我从本网站的另一篇文章中获得的代码使其工作，我只是想知道是否有人可以向我解释，因为我对jQuery有点新，我真的想了解它为什么有效。

代码如下：

 function testimonials() { //function here } //to stop on hover var timerId = null; function startRotation() { if (timerId) { return; } timerId = setInterval('testimonials()', 5000); } function stopRotation() { if (!timerId) { return; } clearInterval(timerId); timerId = null; } $(function () { startRotation(); $('.testimonials').hover(stopRotation, startRotation); }); 

Answer 1

那么这是如何工作的……让我们一块一块地分解它。 .hover(func1, func2)是.mouseenter(func1) .mouseleave(func2)的快捷方式，这意味着当鼠标进入元素时第一个函数执行，第二个函数离开时执行。

第一个function，当鼠标进入时：

 function stopRotation() { if (!timerId) { return; } clearInterval(timerId); timerId = null; } 

这将停止先前通过setInterval()设置的间隔运行，通过clearInterval()清除当前循环并清除timerId变量，因此startRotation函数在准备好（在mouseleave ）时重新启动循环。

第二个function，当鼠标离开时：

 function startRotation() { if (timerId) { return; } timerId = setInterval('testimonials()', 5000); } 

这通过启动计时器每5秒运行一次testimonials()来重新启动循环，但timerId是没有计时器已经运行（通过checkin设置了timerId ）。 它通过setInterval()完成此操作。

我要做的一个改变，永远不会将字符串传递给setInterval()或setTimeout() ，这会在内部运行一个eval() 。 而只是直接调用函数引用，如下所示：

 timerId = setInterval(testimonials, 5000);