如何在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,你会看到承诺记录过来,但只有一个解析的消息。

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...