restart loop after it's paused by flag

Question

I'm putting together some code to essentially replace the contents of a div when I mouseover a specific link. I then added the changer function to cycle through the content replacement automatically. I set flags for mouseover and mouseout and I can actually get the changer function to stop on mouseover but I can't quite figure out how to make it start up again on mouseout. Any advice is appreciated.

var pause=false;
$('.banner-nav a').mouseover(function () {
    pause=true;
    setFeature(this);
    return false;
});
$('.banner-nav a').mouseout(function () {
    pause=false;
});
changer(0, 5000);

function setFeature(f) {
    var m = $(f).attr('rel');
    $('.banner-nav a').not(f).removeClass('active');
    $(f).addClass('active');
    $('#featureContainer').html($(m).html());       
}
function changer(index, interval) {
    var buttons = $('.trigger'),
    buttons_length = buttons.length;  
    var button = buttons.eq(index % buttons_length);
    setFeature($(button));
    setTimeout(function() {
        if (!pause) {
            changer(++index, interval);
        }
    }, interval)
}

possible duplicate of [How to pause a setTimeout call?](http://stackoverflow.com/questions/2626005/), [javascript: pause setTimeout();](http://stackoverflow.com/questions/3969475/), [Javascript setTimeout function](http://stackoverflow.com/questions/7191769/) — outis, Jan 20 '12 at 20:56

outis · Accepted Answer · 2012-01-20T20:46:39.670

The issue is that changer is responsible for its own delayed execution, but pausing it stops the scheduled execution. Another problem is that the next scheduled execution (if any) still happens after pausing.

Use setInterval instead of setTimeout. Instead of using a flag, clear the interval to pause and start it again to unpause.

(function() {
    var index=0;

    function changer() {
        var buttons = $('.trigger'),
        buttons_length = buttons.length;  
        var button = buttons.eq(index % buttons_length);
        setFeature($(button));
        ++index;
    }

    var changerInterval,
        period = 5000;

    function startChanger() {
        if (! changerInterval) {
            changerInterval = setInterval(changer, interval);
        }
    }
    function stopChanger() {
        clearInterval(changerInterval);
        changerInterval = 0;
    }

    $('.banner-nav a').mouseover(function () {
        stopChanger();
        setFeature(this);
        return false;
    });
    $('.banner-nav a').mouseout(function () {
        startChanger();
    });

    /* could implement other functions to e.g. change the period */
    function setChangerPeriod() {
        ...
    }
    window.setChangerPeriod = setChangerPeriod;
    ...
})

Hi outis, thanks so much for your response. I tried implementing this but I think I must be missing something. It doesn't seem to fire the changer at all. I setup a jsfiddle here.http://jsfiddle.net/F855X/2/ — Brian, Jan 20 '12 at 21:58

restart loop after it's paused by flag

1 Answers1