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

下划线库提供了一个防抖功能，可以防止在一段时间内对某个功能的多次调用。他们的版本使用setTimeout。

我们怎么能在纯AngularJS代码中这样做？

此外，我们可以使用$ q样式promise来在debounce期后从被调用的函数中检索返回值吗？

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

每次调用去抖动函数时，返回内部函数的下一个调用的承诺。

// 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方法，可以获得去抖动函数的返回值。

$scope.logReturn = function(msg) {
  var returned = debounce($scope.addMsg,2000,false);
  console.log('Log: ',returned);
  returned.then(function(value) {
    console.log('Resolved:',value);
  });
};

如果你连续多次调用logReturn，你会看到承诺记录过来，但只有一个解析的消息。

原文地址：https://www.jb51.cc/angularjs/146203.html