[英]Using $timeout to limit the amount of http request that go out in Angularjs 1.2 Search app
I'm doing a type ahead style form that has a ng-model of findSearchValue and when the user types in the input I watch this and when it updates I fire off the search function. 我正在做一个类型提前的样式表单,它有一个ng-model的findSearchValue ,当用户键入输入时我会看到它,当它更新时我会触发搜索功能。 The issue that I'm having is when a user types a word (for example Spaceship ) the function fires off 9 requests for Spaceship ;
我遇到的问题是当用户键入一个单词(例如Spaceship )时,该函数会触发9个对Spaceship的请求; 1 for each letter in the word.
单词中的每个字母为1。
I tried using a timeout, but all this does is wait 900ms and then fires off all 9 requests. 我尝试使用超时,但所有这一切都是等待900毫秒,然后触发所有9个请求。 What would ensure that the request is only fired after the user has stopped typing for a given amount of time.
什么可以确保只有在用户停止输入指定时间后才会触发请求。
Here is my current code: 这是我目前的代码:
$scope.findSearchValue = '';
$scope.getFindResults = function(findSearchValue) {
if ($scope.findSearchValue.length > 2) {
$timeout(function(){
$http.get('/search.json?term=' + $scope.findSearchValue).success(function(data) {
$scope.findResults = data;
$scope.showSearchResults = true;
});
}, 900);
} else {
$scope.showSearchResults = false;
}
};
$scope.$watch('findSearchValue', function(newValue, oldValue) {
if (newValue !== oldValue) {
$scope.getFindResults();
}
});
Also, I know there are plenty of directives that handle this use case. 另外,我知道有很多指令可以处理这个用例。 I do not feel like installing a large directive just to do something so small.
我不想安装一个大型指令只是为了做一些如此小的事情。 Thanks
谢谢
Sounds like you want to debounce . 听起来你想要去抖动 。 You should drop the extra
$timeout
code and just do: 你应该删除额外的
$timeout
代码,然后执行:
ng-model-options="{ debounce: 900 }"
on the element. 在元素上。
EDIT : As mentioned below in the comments the above requires Angularjs 1.3. 编辑 :如下面评论中所述,上述要求Angularjs 1.3。 If you need to debounce but cannot upgrade your angularjs install then try something like this: github.com/shahata/angular-debounce
如果您需要去抖但无法升级您的angularjs安装,请尝试以下方法: github.com/shahata/angular-debounce
Store the old timeout promise and cancel it every time a new change comes. 存储旧的超时承诺,并在每次发生新的更改时取消它。 The key is to use
$timeout.cancel(promise)
. 关键是要使用
$timeout.cancel(promise)
。 promise
is returned by $timeout()
. $timeout()
返回promise
。 Using your code (untested): 使用您的代码(未经测试):
$scope.findSearchValue = '';
var promise = null;
$scope.getFindResults = function(findSearchValue) {
if ($scope.findSearchValue.length > 2) {
if (promise) {
$timeout.cancel(promise);
}
promise = $timeout(function(){
$http.get('/search.json?term=' + $scope.findSearchValue).success(function(data) {
$scope.findResults = data;
$scope.showSearchResults = true;
});
}, 900);
} else {
$scope.showSearchResults = false;
}
};
$scope.$watch('findSearchValue', function(newValue, oldValue) {
if (newValue !== oldValue) {
$scope.getFindResults();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.