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

Question

所以我知道这是一个经常被问到的问题，但我希望现在能用更简单的方法来实现这个目标。 我想做的就是有一个div来显示用户的新帖子，一次一个。套接字IO会将新数据推送到列表中，并且一次只能隐藏一个以外的所有数据。将有一个间隔来更改每x秒数显示的数据。我想要做的是当用户将鼠标悬停在它上面时，暂停间隔，以及当它们从中断处离开时恢复。

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

Answer 1

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

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/

Answer 2

  

我想要做的是当用户将鼠标悬停在其上，暂停间隔时，以及当他们从中断处继续鼠标时

如果你想让它暂停间隔并在间隔的中间恢复（比如它是一个很大的间隔，可能是一秒或更长），那么你可以使用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/

Answer 3

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

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

和

clearInterval(interval);