標誌暫停後重新啓動循環

當我將鼠標懸停在特定鏈接上時，我正在放置一些代碼以基本上替換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) 
}

來源

2012-01-20 Brian

可能重複[如何暫停方法setTimeout？]（http://stackoverflow.com/questions/2626005/），[JavaScript的：暫停的setTimeout（）;（http://stackoverflow.com/questions/3969475 /），[Javascript setTimeout函數]（http://stackoverflow.com/questions/7191769/） – outis

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

的

來源

2012-01-20 20:40:50 outis

嗨outis，非常感謝您的迴應。我試圖實現這一點，但我認爲我必須失去一些東西。它似乎根本不會觸發換器。我在這裏設置了一個jsfiddle .http：//jsfiddle.net/F855X/2/ – Brian

Outis，我知道它的工作原理。再次感謝。 – Brian

標誌暫停後重新啓動循環

回答

相關問題