javascript - 悬停时停止循环

Question

我正在使用 jQuery 在列表 ul 上循环 addClass 和 removeClass 函数。

$(function () {
  var $looped = $('li');

  (function _loop(idx) {
    $looped.removeClass('current').eq(idx).addClass('current');
    setTimeout(function () {
      _loop((idx + 1) % $looped.length);
    }, 1000);
  }(0));
});

我想在使用 .mouseenter() 将元素悬停时停止此循环，以让用户自行控制此示例。

JSFiddle Demo View

使用 Tobia Pause Plugin 可以很容易地实现这一点，但遗憾的是这仅适用于 animate() 循环。我感谢每一个提示或技巧!

Answer 1

在此示例中，我展示了如何在 hover() 事件上暂停和重新启动动画。这也会在动画停止的地方重新启动动画。

$(function () {
    var $looped = $('li');
    var timeOut;
    var index = 0;
    function _loop(idx) {
        $looped.removeClass('current').eq(idx).addClass('current');
        timeOut = setTimeout(function () {
            index = (idx + 1) % $looped.length;
            _loop(index);
        }, 1000);
    };
    _loop(index);
    $("ul").hover(function () {
        window.clearTimeout(timeOut);
    }, function () {
        _loop(index);
    });
    $("li").hover(function () {
        $("li").removeClass("current");
        $(this).addClass("current");
    }, function () {
        $("li").removeClass("current");
    });
});

有几个关键点。

首先 - 我在跟踪超时函数的匿名函数中分配一个函数范围变量(非全局)。这允许我稍后在该函数中清除它。不必要地弄乱全局命名空间通常是一个坏主意。

第二 - 我将 mouseenter() 函数更改为 hover() 函数，该函数接受两个函数作为参数，一个用于鼠标悬停，另一个用于鼠标悬停鼠标移出事件。

第三 - 我添加了一个名为 index 的变量，它将在整个函数中为我们跟踪索引。当鼠标不再位于元素上方时，这允许循环准确地从中断处恢复。

参见Fiddle HERE