如何在AngularJS中写一个反弹服务

下划线库提供了一个去抖动function,可以防止在设定的时间内多次调用某个函数。 他们的版本使用setTimeout。

我们怎么能在纯AngularJS代码中做到这一点?

而且,我们可以使用$ q风格的promise来在去抖动之后从被调用的函数中获取返回值吗?

这是一个这样的服务的工作示例: http : //plnkr.co/edit/fJwRER?p=preview 。 它创build一个$q延迟对象,当最终调用debounced函数时,这个对象将被parsing。

每次调用debounce函数时,都会返回对内部函数的下一个调用的承诺。

 // 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.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调用一遍又一遍logging,但只logging一次addMsg调用。

angular1.3有标准的去抖动

值得一提的是,在Angular 1.3中内置了反弹技术。 正如你所期望的那样,它是作为一个指令来实现的。 你可以这样做:

 <input ng-model='address' ng-model-options="{ debounce: 500 }" /> 

$ scope.address属性直到最后一次击键后500毫秒才会更新。

如果你需要更多的控制

如果你想要更多的粒度,你可以为不同的事件设置不同的跳动时间:

 <input ng-model='person.address' ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" /> 

在这里,例如,我们有一个500ms的反弹击键,并没有反弹模糊。

文档

阅读这里的文档: https : //docs.angularjs.org/api/ng/directive/ngModelOptions

自从我写了上面的评论之后,我对此有了一些改变。

简单的答案是,你不应该需要去除返回值的函数。

为什么? 那么从哲学angular度来说,我认为更有意义的是不要为事件而且只为了事件而发动反弹。 如果你有一个方法返回一个你想要去除的值,你应该去掉导致你的方法在下游运行的事件

皮特BD给了反弹服务很好的开始,但是我看到两个问题:

  1. 如果您需要更改调用方中的状态,则会返回使用JavaScript闭包的工作()callback。
  2. 超时variables – 是不是超时variables的问题? 超时[]也许? 想象2个使用debounce-signalr的指令,input表单validation器, 我相信工厂方法会崩溃。

我目前使用的是:

我将工厂更改为一个服务,所以每个指令都会得到一个新的debounce实例,即超时variables的新实例。 – 我没有遇到一个情况,其中1个指令将需要暂停超时[]。

 .service('reactService', ['$timeout', '$q', function ($timeout, $q) { this.Debounce = function () { var timeout; this.Invoke = function (func, wait, immediate) { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) { func.apply(context, args); } }; var callNow = immediate && !timeout; if (timeout) { $timeout.cancel(timeout); } timeout = $timeout(later, wait); if (callNow) { func.apply(context, args); } }; return this; } }]); 

在我的angularjs远程validation程序

  .directive('remoteValidator', ['$http', 'reactService', function ($http, reactService) { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { var newDebounce = new reactService.Debounce(); var work = function(){ //.... }; elm.on('blur keyup change', function () { newDebounce.Invoke(function(){ scope.$apply(work); }, 1000, false); }); } }; }]) 

有一个很好的执行debounce服务和指令,可以与任何ng模型在https://github.com/shahata/angular-debounce

或者只需使用以下命令安装

 bower install ng-debounce 

capaj/ng-tools/blob/master/src/debounce.html

用法:

 app.directive('autosavable', function(debounce) { return { restrict : 'A', require : '?ngModel', link : function(scope, element, attrs, ngModel) { var debounced = debounce(function() { scope.$broadcast('autoSave'); }, 5000, false); element.bind('keypress', function(e) { debounced(); }); } }; }); 

如果您正在处理模型交互,对此的支持已经落在了angularjs#1.3.0.beta6中。

https://docs.angularjs.org/api/ng/directive/ngModelOptions