フラグによって再起動された後の再起動のループ

Question

特定のリンクをマウスオーバーするときにdivの内容を置き換えるコードをまとめています。その後、チェンジャー機能を追加してコンテンツの置換を自動的に繰り返しました。私はマウスオーバーとマウスアウトのフラグを設定して、実際にマウスオーバーで停止するチェンジャー機能を得ることができますが、マウスアウト時に再び起動させる方法を理解できません。アドバイスをいただければ幸いです。

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は、独自の遅延実行のために責任があるということですが、それを一時停止すると、スケジュールされた実行を停止します。別の問題は、次のスケジュールされた実行（もしあれば）が、一時停止後にまだ起こるということです。

setTimeoutの代わりにsetIntervalを使用してください。フラグを使用する代わりに、一時停止する間隔をクリアし、一時停止する間隔をもう一度開始してください。

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