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

Answer 1

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