如何让这个 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

感谢 Rob 的帮助！我只是发布我最终做的事情以供其他人参考。我使用了 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() 将确保它只在您附加后触发一次。