之后重新启动循环's被flag暂停

restart loop after it's paused by flag

本文关键字：flag 暂停 重新启动 循环 之后      更新时间：2023-09-26

当鼠标悬停在特定链接上时，我正在编写一些代码来替换div的内容。然后我添加了changer功能来自动循环内容替换。我为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)
}

问题是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;
    ...
})
相关文章：