悬停时的jQuery延迟代码？（最简单的方法）答案

【问题标题】：jQuery delay code on hover? (easiest way)悬停时的jQuery延迟代码？（最简单的方法）
【发布时间】：2012-01-28 21:31:48
【问题描述】：

所以我知道这是一个被问了很多的问题，但我希望现在使用 jQuery 可以更轻松地做到这一点。我想要做的就是有一个 div 显示来自用户的新帖子，一次一个。 Socket IO 会将新数据推送到列表中，一次将隐藏除一个之外的所有数据。每 x 秒将有一个时间间隔来更改显示的数据。我想要做的是当用户将鼠标悬停在它上面时，暂停间隔，当他们将鼠标移出时恢复它停止的地方。

<ul> 
<li class="current">List #1</li>
<li>List #2</li>
</ul>

【问题讨论】：

标签： jquery hover

【解决方案1】：

您可以使用 setInterval 每 X 毫秒更改一次图像，然后使用 clearInterval 停止它。

var interval = setInterval(<function>, <delay>);

和

clearInterval(interval);

【讨论】：

【解决方案2】：

您没有显示您已经拥有的代码，但以下是一种相当通用的方法：

var pause = false;

setInterval(function() {
   if (pause)
      return;

   // your code to change the item here

}, delay);

$("selector for your element here").hover(
   function() {
      pause = true;
   },
   function() {
      pause = false;
   }
);

（可能应该在文档中准备好上述所有内容。）

工作演示：http://jsfiddle.net/N2uMA/

【讨论】：

效果很好，谢谢。（我还没有在我的网站上编写过这个函数，我只是在琢磨这个想法）

【解决方案3】：

我想要做的是当用户将鼠标悬停在它上面时，暂停间隔，当他们将鼠标移出时恢复它停止的地方

如果你想让它暂停间隔并在间隔中间恢复（比如说它是一个很大的间隔，可能是一秒或更长时间），那么你可以使用code from this other question, showing how to interrupt and resume an interval exactly where it was left off。

我想要做的就是有一个 div 来显示来自用户的新帖子，一次一个

使用另一个问题的代码，这里是一些触发列表链的代码，在每个项目上设置 current 并淡入，直到全部显示：

var currentTimer;
var timeBetween = 500;

function hideCurrentAndSetUpNext()
{
    var current = $('ul li.current:last');
    current.fadeIn();

    var next = current.next();
    if(next != null)
    {
        next.addClass('current');
        currentTimer = new Timer(hideCurrentAndSetUpNext, timeBetween);
    }
}

currentTimer = new Timer(hideCurrentAndSetUpNext, timeBetween);

$('ul li').hover(
    function() {
        currentTimer.pause();
    },
    function() {
        currentTimer.resume();
    }
);

这是一个演示此代码的小提琴：

http://jsfiddle.net/6CpGr/

【讨论】：