在悬停时停止jQuery循环功能 [英] Stopping jQuery cycle function on hover

问题描述

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

I have a function called testimonials() that basically cycles through a set of divs, whereas it animates a div in, animates it out and animates the next one in.

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

Now, I wanted to make it stop on the current DIV once the mouse is on it, otherwise known as hovering it. And I've made it work using a code I got from another post in this site, I was just wondering if someone could explain it to me because I'm a little new to jQuery and I really want to understand why it is working.

代码如下：

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

推荐答案

那么这是怎么回事......让我们打破它吧一块一块地下来。 .hover（func1，func2） 是 .mouseenter（func1） 的快捷方式 .mouseleave（func2） ，表示第一个函数在鼠标进入元素时执行，第二个函数在它离开时执行。

So how this is working...let's break it down piece by piece. .hover(func1, func2) is a shortcut for .mouseenter(func1) .mouseleave(func2), meaning the first function executes when your mouse enters the element, the second when it leaves.

第一个函数，当鼠标进入时：

First function, when the mouse enters:

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

这是通过 setInterval（） 再次运行，通过<杀死当前循环a href =http://www.w3schools.com/jsref/met_win_clearinterval.asp =nofollow noreferrer> clearInterval（） 并清除 timerId 变量，所以 startRotation 函数在准备就绪时重启循环（在 mouseleave ）。

This is stopping the interval previously set via setInterval() from running anymore, killing the current loop via clearInterval() and clearing the timerId variable, so the startRotation function restarts the loop when it's ready to (on mouseleave).

鼠标离开时的第二个功能：

Second function, when the mouse leaves:

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

这通过启动计时器来重新启动循环推荐（）每5秒，但仅在没有计时器已经运行的情况下（通过签入，如果设置了 timerId ）。它是通过 setInterval（） 。

This re-starts the loop by starting a timer to run testimonials() every 5 seconds, but only if there isn't a timer already running (by checkin if timerId is set). It does this via setInterval().

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

One change I would make, never pass a string into setInterval() or setTimeout(), this runs an eval() internally. Instead just call the function reference directly, like this:

timerId = setInterval(testimonials, 5000);

这篇关于在悬停时停止jQuery循环功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！