あまりにも多くのコールを避けるために無限のスクロールのためのデバウンス

Question

これはカスタムディレクティブで、lodashのデバウンスを使用しようとしましたが動作しませんでした。私はデバウンスを削除することができますが、私のネットワークでは、ユーザがページの一番下にスクロールしたときに余分な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(); 
     } 
     }); 
    }; 
    });