Блог

У меня есть рекурсивная функция для своего рода слайдера изображения.

 function nextCol(col) {
  $('.menubox_col').fadeOut();
  $('.menubox_col').eq(col).fadeIn(function(){
    col  ;  
    if (col > 3) col = 0;
    setTimeout(function(){ nextCol(col) }, 1000);  
  });
}

<div id="menubox">      
        <div class="menubox_col">content</div>
        <div class="menubox_col">content</div>
        <div class="menubox_col">content</div>
        <div class="menubox_col">content</div>
</div>
  

Это работает нормально, но я не нашел способа остановить рекурсивную функцию, когда курсор мыши попадает в #menubox div.

Хотя вы могли бы использовать clearTimeout и затем снова перезапустить анимацию, вы могли бы просто установить флаг, что означает, что вам не нужно останавливать и запускать таймеры… Это остановит анимацию, когда мышь окажется над полем меню, и продолжит ее, когда она уйдет. Я также взял на себя смелость внести некоторые небольшие изменения в код — я нахожу результат намного проще:

 $(function(){

  var col = 0, hover = false;

  function nextCol() {
    if(hover){return;} // if their mouse is over, do nothing
    col = (col 1) % 4; // make this a one-liner. the 4 probably shouldn't be hard-coded though, it could be $('.menubox_col').length
    $('.menubox_col').fadeOut().eq(col).fadeIn();
  }

  setInterval(nextCol, 1000);

  $('#menubox').hover(function(){ hover=true; }, function(){ hover=false; });

});
  

Вы могли бы отменить время ожидания с помощью clearTimeout:

 var timeoutHandle = null;

function nextCol(col) {
    $('.menubox_col').fadeOut();
    $('.menubox_col').eq(col).fadeIn(function() {
        col  ;  
        if (col > 3) { col = 0; }
        timeoutHandle = setTimeout(function() { 
            nextCol(col);
        }, 1000);  
    });
}

$('#menubox div').mouseenter(function() {
    window.clearTimeout(timeoutHandle);
});