滚动到带有偏移量的页面底部 - 函数多次运行答案

【问题标题】：Scroll to the bottom of the page with offset - function running multiple times滚动到带有偏移量的页面底部 - 函数多次运行
【发布时间】：2018-02-15 22:30:02
【问题描述】：

我有一些功能，它检查用户是否滚动到页面底部，如果是，则运行 ajax 并将部分结果添加到当前页面中。这很好用，但是如果我添加负数来更快地启动这个函数，getData() 函数会运行很多次，而且所有代码都开始表现得很奇怪——你可以向上滚动一个像素，然后再次运行。下面的工作版本没有偏移，下一个偏移对我来说更好，因为函数开始得更早，但是加载 getData() 很多次，这是错误的。

我想一些带有标志的解决方案 - 真/假，但我不知道如何正确地做到这一点。

$(window).scroll(function() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    console.log(counter)
    if (counter > sum) {
      return false;
    } else {
      getData(counter);
      counter++;
    }
  }
});

$(window).scroll(function() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 300) {
    console.log(counter)
    if (counter > sum) {
      return false;
    } else {
      getData(counter);
      counter++;
      //$(window).unbind('scroll');
    }
  }
});

【问题讨论】：

搜索“滚动去抖动”
为了提供更多信息，scroll 事件每滚动一个像素就会触发一次。您只需要在滚动停止 N 毫秒后才执行您的逻辑 - 正如@mplungjan 所指的那样，这是去抖动
stackoverflow.com/questions/36415992/…

标签： javascript jquery

【解决方案1】：

感谢您消除提示。多亏了这个，我能够修复我的代码，现在一切正常。下面的例子：

$(window).scroll(function() {
  var timer;
  if (timer) {
    window.clearTimeout(timer);
  }
  timer = window.setTimeout(function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 500) {
      console.log(counter)
      if (counter > sum) {
        return false;
      } else {
        getData(counter);
        counter++;
      }
    }
  }, 200);
});

【讨论】：