被标志暂停后重新启动循环

Question

当我将鼠标悬停在特定链接上时，我正在整理一些代码来实质上替换 div 的内容。然后我添加了更改器功能以自动循环内容替换。我为 mouseover 和 mouseout 设置了标志，实际上我可以让 changer 功能在 mouseover 时停止，但我不太清楚如何让它在 mouseout 时重新启动。任何建议表示赞赏。

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

问题是changer 负责它自己的延迟执行，但暂停它会停止计划的执行。另一个问题是下一次计划执行（如果有）在暂停后仍然发生。

使用setInterval 而不是setTimeout。不要使用标志，而是清除间隔以暂停并再次启动以取消暂停。

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