Question

我有一个名为testimonials()的函数，它基本上循环遍历一组div，而它会激活div，将其设置为动画并为下一个设置动画。

现在，我希望一旦鼠标在它上面就停止当前的DIV，否则称为悬停它。我使用我从本网站的另一篇文章中获得的代码使其工作，我只是想知道是否有人可以向我解释，因为我对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 stopRotation() {
    if (!timerId) {
        return;
    }
    clearInterval(timerId);
    timerId = null;
}

这会停止先前通过setInterval()设置的间隔再次运行，通过clearInterval()终止当前循环并清除timerId变量，以便startRotation函数重新启动当它准备就绪时循环（在mouseleave上）。

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

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

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

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

timerId = setInterval(testimonials, 5000);

在悬停时停止jQuery循环功能

1 个答案: