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?

robbrit · Accepted Answer · 2012-07-19 16:27:23Z

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

answered Jul 19, 2012 at 16:27

robbrit

18k4 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IGGt Over a year ago

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

Diogo Schneider · Accepted Answer · 2012-07-19 17:44:59Z

0

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.

answered Jul 19, 2012 at 17:44

Diogo Schneider

3492 silver badges9 bronze badges

Collectives™ on Stack Overflow

Pausing function in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related