Pausing function in javascript

Question

I have a function which loops through rows in a table so that only one is shown at any given time.

I want to expand on this so that when I hover over the table, it shows all the rows, and then when I move away, it resumes showing one row at a time.

The Problem I have is that on hovering, the first function keeps going, is there a way to 'pause' the function. I've looked at various examples using ClearInterval(),but can't match them to my script.

//Calling The function that loops through the rows 
function hideShow(time)
{ 
 setInterval('showRows()',time); 
}; 
//Set the time between each 'loop' and start looping 
$(document).ready(function()
{
 hideShow(2000);
} 
);
//The hover function to show / hide all the rows
$(document).ready(function()
{
 $('#dbTable1 tr').hover(function() 
 {
 $('.Group td').removeClass('RoundBottom');
 $('.Group').show();
 }, 
 function()
 {
 $('.Group td').addClass('RoundBottom');
 $('.Group').hide();
 }
 ); 
}
);

Can anyone show me please how I can combine the two?

Answer 1

You need to keep track of the timer ID when you call setInterval:

var timerID;
function hideShow(time){
 timerID = setInterval(showRows, time);
}

Then later on when you want to stop the repetition, call clearInterval and pass in that ID:

// ...
 $('.Group td').removeClass('RoundBottom');
 $('.Group').show();
 clearInterval(timerID);
},
function()
{
 hideShow(2000);
 $('.Group td').addClass('RoundBottom');
 // ...

• IGGt: Cheers, I was so close, but not quite there. That works great.

Answer 2

You could just check the hovering state before doing anything else, like this:

function showRows() {
 if (isHovering) {
 return;
 }
 // ...
}

The isHovering variable is just a boolean with current hovering state, that could be set by your callback function.

With the above approach, you can set your timer only once and forget about it.