angularjs - 如何在 AngularJS 中编写去抖动服务

Question

underscore 库提供了一个 debounce 函数，可以防止在设定的时间段内多次调用一个函数。他们的版本使用了 setTimeout。

我们如何在纯 AngularJS 代码中做到这一点？

此外，我们是否可以使用 $q 风格的 Promise 在去抖动期后从被调用函数中检索返回值？

Answer 1

以下是此类服务的一个工作示例:http://plnkr.co/edit/fJwRER?p=preview .
它创建一个 $q最终调用去抖动函数时将解析的延迟对象。

每次debounce函数被调用，对内部函数的下一次调用的 promise 被返回。

// Create an AngularJS service called debounce
app.factory('debounce', ['$timeout','$q', function($timeout, $q) {
  // The service is actually this function, which we call with the func
  // that should be debounced and how long to wait in between calls
  return function debounce(func, wait, immediate) {
    var timeout;
    // Create a deferred object that will be resolved when we need to
    // actually call the func
    var deferred = $q.defer();
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if(!immediate) {
          deferred.resolve(func.apply(context, args));
          deferred = $q.defer();
        }
      };
      var callNow = immediate && !timeout;
      if ( timeout ) {
        $timeout.cancel(timeout);
      }
      timeout = $timeout(later, wait);
      if (callNow) {
        deferred.resolve(func.apply(context,args));
        deferred = $q.defer();
      }
      return deferred.promise;
    };
  };
}]);

您可以使用 promise 上的 then 方法从 debounced 函数中获取返回值。

$scope.addMsg = function(msg) {
    console.log('addMsg called with', msg);
    return msg;
};

$scope.addMsgDebounced = debounce($scope.addMsg, 2000, false);

$scope.logReturn = function(msg) {
    console.log('logReturn called with', msg);
    var promise = $scope.addMsgDebounced(msg);
    promise.then(function(msg) {
        console.log('Promise resolved with', msg);
    });
};

如果您调用 logReturn快速连续多次您将看到 logReturn通话记录了一遍又一遍，但只有一个 addMsg通话记录。