我想知道是否有可能在$ scope上实施一点延迟.$ watch.我有以下查询服务器,所以我想在评估query
服务器之前稍微延迟.我注意到如果你快速键入它会混淆并且不会发送正确的信息:
$scope.$watch("query", function () { $scope.loading = true; returnFactory.query($scope.query).then(function (returns) { $scope.returns = returns; $scope.loading = false; }); });
Konstantin K.. 34
通常情况下我会说这个延迟使用angular的$ timeout,但你还是不能清除这个超时.
//编辑:你可以.
如果此观察者被快速触发,则设置超时并清除它.
像这样:
var timeoutCode; var delayInMs = 2000; $scope.$watch("query", function(query) { clearTimeout(timeoutCode); //does nothing, if timeout alrdy done timeoutCode = setTimeout(function(){ //Set timeout $scope.loading = true; returnFactory.query(query).then(function(returns) { $scope.returns = returns; $scope.loading = false; }); },delayInMs); });
http://jsfiddle.net/4FuyY/
更新感谢stewie这可以通过angular的$ timeout来实现.
var timeoutPromise; var delayInMs = 2000; $scope.$watch("query", function(query) { $timeout.cancel(timeoutPromise); //does nothing, if timeout alrdy done timeoutPromise = $timeout(function(){ //Set timeout $scope.loading = true; returnFactory.query(query).then(function (returns) { $scope.returns = returns; $scope.loading = false; }); },delayInMs); });
`$ timeout`**可以用`$ timeout.cancel(timeoutPromise)`清除. (7认同)
Isma90.. 12
你可以使用ng-model-option,如果模型'query'是Html标签或Angular指令,对于Ej:
你可以在这里看到Angular Doc:https://docs.angularjs.org/api/ng/directive/ngModelOptions
你可以使用ng-model-option,如果模型'query'是Html标签或Angular指令,对于Ej:
<input type ng-model="query" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 2000, 'blur': 1 } }" />
你可以在这里看到Angular Doc:https://docs.angularjs.org/api/ng/directive/ngModelOptions
我喜欢使用Lo-Dash,它提供了两个非常有用的功能:debounce和throttle,它可以完全满足您的需求.假设你想确保它每150毫秒只调用一次函数:
function update() { $scope.loading = true; returnFactory.query($scope.query).then(function (returns) { $scope.returns = returns; $scope.loading = false; }); } $scope.$watch("query", function () { _.throttle(update, 150); });
该throttle
功能可让您控制何时update
调用函数(尾随或前沿).
我在我的应用程序中一直使用Lo-Dash.它对我来说是一个必备的库...比jQuery更有用.但是,如果您不想包含整个库,则可以创建Lo-Dash的自定义构建,其中仅包含throttle
和debounce
函数.
通常情况下我会说这个延迟使用angular的$ timeout,但你还是不能清除这个超时.
//编辑:你可以.
如果此观察者被快速触发,则设置超时并清除它.
像这样:
var timeoutCode; var delayInMs = 2000; $scope.$watch("query", function(query) { clearTimeout(timeoutCode); //does nothing, if timeout alrdy done timeoutCode = setTimeout(function(){ //Set timeout $scope.loading = true; returnFactory.query(query).then(function(returns) { $scope.returns = returns; $scope.loading = false; }); },delayInMs); });
http://jsfiddle.net/4FuyY/
更新感谢stewie这可以通过angular的$ timeout来实现.
var timeoutPromise; var delayInMs = 2000; $scope.$watch("query", function(query) { $timeout.cancel(timeoutPromise); //does nothing, if timeout alrdy done timeoutPromise = $timeout(function(){ //Set timeout $scope.loading = true; returnFactory.query(query).then(function (returns) { $scope.returns = returns; $scope.loading = false; }); },delayInMs); });