javascript - 无限滚动去抖以避免过多调用

Question

这是一个自定义指令，尝试使用 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);
          }
        }
      });
    };
  });

Answer 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();
        }
      });
    };
  });