使用angularjs中的去抖动延迟代码

时间:2015-09-15 14:51:10

标签: angularjs

我必须在angularjs中编写电子邮件验证功能。我希望在用户使用电子邮件ID进行编辑后2秒后发布帖子请求。在angularjs中是否有任何预先定义的方法。 fiddle

var app = angular.module('form-example', []);
    app.controller('formctrl',function($scope){
        var ctrl= this;
        ctrl.verifyEmail= function(){    
        console.log('hiiii')
        }

    })

3 个答案:

答案 0 :(得分:18)

去抖动内置了Angular 1.3+。正如您所期望的那样,它是作为指令实现的。你可以这样做:

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

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

如果您需要更多控制

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

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

例如,我们对按键进行了500毫秒的反弹,而没有模糊的反弹。

文档

请阅读此处的文档:https://docs.angularjs.org/api/ng/directive/ngModelOptions

答案 1 :(得分:1)

您可以使用ng-model-options来延迟模型更新。这是一个工作示例。此功能已在Angular 1.4+中添加。

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) {
    
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<script>

</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="email" ng-model-options="{ debounce: 2000 }"/>
  <br/><br/>
  The email will be updated here after 2 seconds: <strong>{{email}}</strong>
</div>

</body>
</html>

答案 2 :(得分:0)

您可以使用有角度的$timeout service

var app = angular.module('form-example', []);
    app.controller('formctrl',function($scope, $timeout){
        var ctrl= this;
        ctrl.verifyEmail= function(){    
           $timeout(function(){
               console.log('hiiii');
           }, 2000); 
        }

    })