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');
  // ...