Comment puis-je faire en sorte que cet écouteur jQuery ne se déclenche pas plusieurs fois?

Question

J'ai actuellement la fonction suivante qui récupère efficacement JSON de Django et charge les films par défilement infini. Cependant, je trouve que parfois cet événement se déclenche plusieurs fois, et il finit par obtenir la même page deux fois.

$(window).scroll(function() { 
    var break_point = $(document).height() - ($(window).height() * 1.02); 
    if ($(window).scrollTop() >= break_point) { 
    var timePeriod = $('.tab-content').find('.active').attr('id'); 
    var nextPage = $('#'+timePeriod+' ul li:last').attr('data-next'); 
    if (nextPage) { 
     loadMovies(timePeriod, nextPage); 
    } 
    } 
}); 

Quelle est la meilleure façon d'empêcher l'exécution de cet écouteur plusieurs fois par page?

Answer 1

Merci à Rob pour l'aide! Je poste juste ce que j'ai fini par faire pour la référence de tout le monde.J'ai utilisé la fonction debounce de la bibliothèque underscore.js.

var infiniteScroll = _.debounce(function() { 
    var break_point = $(document).height() - ($(window).height() * 1.02); 
    if ($(window).scrollTop() >= break_point) { 
    var timePeriod = $('.tab-content').find('.active').attr('id'); 
    var nextPage = $('#'+timePeriod+' ul li:last').attr('data-next'); 
    if (nextPage) { 
     loadMovies(timePeriod, nextPage); 
    } 
    } 
}, 250); 

$(window).scroll(infiniteScroll); 

Answer 2

utilisation .one ('scroll', function() au lieu de .scroll (fonction()

http://api.jquery.com/one/

En pensant à votre fonctionnalité, vous pourriez avoir à remettre en place le gestionnaire sur reload, cependant. Mais one() veillera à ce qu'il ne se déclenche qu'une fois que vous l'aurez attaché