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，这种情况随机发生，可能是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);
    });
  }
};

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

Answer 2

找到一个工作示例，每次发送1个get请求。

咖啡脚本：

onEndless = ->
  url = undefined
  $(window).off "scroll", onEndless
  url = $(".pagination a.next_page").attr("href")

  if url and $(window).scrollTop() > $(document).height() - $(window).height() - 150
    $(".loader").removeClass "hidden"
    $.getScript url, ->
      $(window).on "scroll", onEndless

  else
    $(window).on "scroll", onEndless

$(window).on "scroll", onEndless
$(window).scroll()

<强> JS：

var onEndless;

onEndless = function() {
  var url;
  $(window).off('scroll', onEndless);
  url = $('.pagination a.next_page').attr('href');
  // $('.pagination').hide();
  if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) {
    $('.loader').removeClass('hidden');
    return $.getScript(url, function() {
      return $(window).on('scroll', onEndless);
    });
  } else {
    return $(window).on('scroll', onEndless);
  }
};

$(window).on('scroll', onEndless);

$(window).scroll();