Debounce 无限滚动以避免过多调用答案

【问题标题】：Debounce for infinite scroll to avoid too many callsDebounce 无限滚动以避免过多调用
【发布时间】：2016-12-12 04:31:50
【问题描述】：

这是一个自定义指令，尝试使用 lodash 的 debounce 但不起作用。我可以删除去抖动，但在我的网络中，当用户滚动到页面底部时，会有额外的 2-4 个调用。如何解决？

angular.module('app')
  .directive('checkBottom', function($document, $window) {
    return function(scope, elm, attr) {
      $document.bind('scroll', function() {
        if( ($window.innerHeight + $window.scrollY) > $document.innerHeight() - 50) {
          _.debounce(applyFunc, 100 ); // this don't work?

          function applyFunc(){
            scope.$apply(attr.checkBottom);
          }
        }
      });
    };
  });

【问题讨论】：

标签： javascript angularjs lodash

【解决方案1】：

_.debounce() 创建一个函数供您以后使用；这不是您调用函数来调用的东西。基于documentation，您可以这样使用它：

var applyFunc = applyFunc(){
  scope.$apply(attr.checkBottom);
}

var debouncedApplyFunc = _.debounce(applyFunc, 100 );

angular.module('app')
  .directive('checkBottom', function($document, $window) {
    return function(scope, elm, attr) {
      $document.bind('scroll', function() {
        if( ($window.innerHeight + $window.scrollY) > $document.innerHeight() - 50) {
          debouncedApplyFunc();
        }
      });
    };
  });

【讨论】：