jquery - 如何让这个 jQuery 监听器不会多次触发？

Question

我目前有以下功能，可以有效地从 Django 检索 JSON 并通过无限滚动加载电影。但是，我发现有时此事件会触发多次，并且最终会获得两次相同的页面。

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

阻止此侦听器每页执行多次的最佳方法是什么？

Answer 1

感谢罗布的帮助！我只是发布我最终做的事情以供其他人参考。我使用了 underscore.js 库的 debounce 函数。

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

使用 .one('scroll', function() 而不是 .scroll(function()

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

不过，考虑到您的功能，您可能必须在重新加载时重新附加处理程序。但是 one() 将确保它仅在您附加后触发一次。