javascript - jquery getScript(url) 重复调用

Question

我有这段jquery代码实现了页面上的无限滚动:

paginate = function() {
  if ($('.pagination').length) {
    $(window).scroll(function() {
      var url;
      url = $('.pagination a.next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.loader').removeClass('hidden');
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
};

$(document).on("page:load ready", paginate);

问题是，当调用这个函数时，我在developer_tools/network中看到2个对同一url的get请求，这种情况是随机发生的，可能是1个请求，也可能是2个请求。

这几天找不到解决办法。迫切需要帮助。

Answer 1

嗯，在脚本加载完成之前，理论上可以多次触发滚动事件。解决这个问题的一种方法是:

paginate = function() {
  if ($('.pagination').length) {
    $(window).scroll(scrollHandler);
    return $(window).scroll();
  }
};

scrollHandler = function() {
  var url;
  url = $('.pagination a.next_page').attr('href');
  if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
    $('.loader').removeClass('hidden');
    $(window).unbind('scroll');
    return $.getScript(url, function() {
      $(window).bind(scrollHandler);
    });
  }
};

其背后的想法是在请求脚本时取消绑定(bind)滚动事件，并在加载脚本后重新绑定(bind)它。