jQuery delay code on hover? (easiest way)

Question

So I know this is a question that has been asked a lot, but I'm hoping for easier ways of doing this with jQuery now. All I want to do is have a div that shows new posts from users, one at a time. Socket IO will push new data into a list, and all but one will be hidden at a time. There will be an interval to change the data shown every x amount of seconds. What I want to do is when a user hovers over it, to pause the interval, and when they mouse out resume where it left off.

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

Answer 1

You don't show the code you already have, but the following is a fairly generic way to do it:

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

(Probably should have all of the above in a document ready.)

Working demo: http://jsfiddle.net/N2uMA/

Answer 2

What I want to do is when a user hovers over it, to pause the interval, and when they mouse out resume where it left off

If you want it to pause the interval and resume in the middle of the interval (say it is a large interval, maybe a second or more), then you could use code from this other question, showing how to interrupt and resume an interval exactly where it was left off.

All I want to do is have a div that shows new posts from users, one at a time

Using the code from the other question, here is some code to trigger a chain on a list, setting current on each item and fading it in, until all are shown:

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

Here is a fiddle demonstrating this code:

• http://jsfiddle.net/6CpGr/

Answer 3

You can use setInterval to change the images every X miliseconds and then use clearInterval to stop it.

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

and

clearInterval(interval);