Бесконечный цикл после события прокрутки

Question

Я пытаюсь сделать div, чтобы прокручивать только 70 пикселей каждый раз, однако я теперь застрял в бесконечном цикле каждый раз, когда прокручиваю.

У меня нет никаких циклических функций в моей функции, но это как-то дает мне бесконечный цикл:

var currentTop = 0;  
$('.contactDiv').on('scroll touchmove mousewheel', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    currentTop = currentTop + 70; 
    $('.contactDiv').animate({ 
     scrollTop: currentTop 
    }, 500); 

    return false; 
}); 

Что случилось с моим кодом?

Answer 1

Вы можете использовать этот трюк: определить логическую переменную scrolling, которые вы установили в верно, когда вы делаете анимацию, проверить его, и установить его в ложное, когда анимация закончена:

var currentTop = 0;  
var scrolling = false; 

$('.contactDiv').on('scroll touchmove mousewheel', function(e){ 
    if (!scrolling) { 
     e.preventDefault(); 
     e.stopPropagation(); 

     currentTop = currentTop + 70; 

     scrolling = true; 
     $('.contactDiv').animate({ 
      scrollTop: currentTop 
     }, 500, function(){ 
      scrolling = false; 
     }); 

     return false; 
    } 
}); 

Редактировать:
Если у вас есть событие прокрутки, выпущенное сразу после окончания анимации, оно действительно запустится до тех пор, пока оно не достигнет дна .contactDiv. Тем не менее, вы можете предотвратить это с дополнительным переменным (здесь называется allowNextAnimation):

jsFiddle demo

var currentTop = 0;  
var scrolling = false; 
var allowNextAnimation = true; 

$('.contactDiv').on('scroll touchmove mousewheel', function(e){ 
    if (!scrolling && allowNextAnimation) { 
     currentTop = currentTop + 70; 

     scrolling = true; 
     $('.contactDiv').animate({ 
      scrollTop: currentTop 
     }, 500, function(){ 
      scrolling = false; 
      allowNextAnimation = false; 
     }); 

     return false; 
    } 
    allowNextAnimation = true; 
}); 

Answer 2

Unbind события прокрутки неда первая прокрутка завершает свое действие и снова связать событие прокрутки после завершения прокрутки - в вашем случае завершение анимации.

Что-то вроде

function scrollHandler() { 
    if ($(window).scrollTop() > $(document).height() - ($(window).height() +300)) { 

      $(window).unbind('scroll'); 
      $('.loading').show(); 
      ............. 
      ............. 
      ............. 
      $(window).bind('scroll', function() { scrollHandler(); }); 
    } 
} 

Надежда это то, что вы ищете.