Question

当我将鼠标悬停在特定链接上时，我正在整理一些代码以基本上替换div的内容。然后我添加了更换器功能以自动循环更换内容。我为mouseover和mouseout设置了标志，我实际上可以让更换器功能在鼠标悬停时停止但是我无法弄清楚如何让它在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;
    ...
})

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

1 个答案: