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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...