使用 ng-keyup 在 angularjs 中搜索对 mysql 的查询,但仅在 3 秒后使用 $http
searching query to mysql in angularjs using ng-keyup but $http only after 3 seconds
我想在 angularjs 中使用 ng-keyup 函数进行在线搜索。但我认为在每次 keyup 上查询 BD 是错误的。那么我如何设置计时器,使 $http 服务仅在最后 3 秒内没有 keyups 时才工作?
<input type="text" ng-keyup="search(param.values, param.url)">
JS:
app.controller('searchCtrl', function($scope,$rootScope,$http){
$scope.search = function( values , type) {
var data={};
data.values=values;
data.type=type;
console.log(data);
$http.post("search.php", data).then(function success (response) {
console.log(response.data);
$rootScope.search_result=response.data;
},function error (response){
console.log(response.data);
}
);
};
});
您可以使用 ng-model-options
到 debounce
您的输入值,这将告诉 angular 在特定时间后更新 ng-model。然后切换到 ng-change
事件而不是 ng-keyup
会更有意义。简而言之,我们使用 debounce
来延迟我们的 API 调用。
<input type="text" ng-model="value" ng-change="search(param.values, param.url)"
ng-model-options="{ debounce: 3000 }"
在搜索模块中等待几秒钟不是很符合人体工程学/用户友好。
我们通常做的是每次用户输入新字符时取消之前的请求。
您可以通过向 timeout
属性 的 $http 请求传递一个承诺来做到这一点。
$http.get(request, {timeout: promise}).then...
您在搜索功能开始时初始化承诺:
abort = $q.defer();
这样,每次调用该函数时,您都可以在发出新请求之前检查是否有承诺并解决(取消)它。
if(abort) {
abort.resolve();
}
查看 working plunker。 (并打开控制台以查看在您键入时取消的请求。)
我想在 angularjs 中使用 ng-keyup 函数进行在线搜索。但我认为在每次 keyup 上查询 BD 是错误的。那么我如何设置计时器,使 $http 服务仅在最后 3 秒内没有 keyups 时才工作?
<input type="text" ng-keyup="search(param.values, param.url)">
JS:
app.controller('searchCtrl', function($scope,$rootScope,$http){
$scope.search = function( values , type) {
var data={};
data.values=values;
data.type=type;
console.log(data);
$http.post("search.php", data).then(function success (response) {
console.log(response.data);
$rootScope.search_result=response.data;
},function error (response){
console.log(response.data);
}
);
};
});
您可以使用 ng-model-options
到 debounce
您的输入值,这将告诉 angular 在特定时间后更新 ng-model。然后切换到 ng-change
事件而不是 ng-keyup
会更有意义。简而言之,我们使用 debounce
来延迟我们的 API 调用。
<input type="text" ng-model="value" ng-change="search(param.values, param.url)"
ng-model-options="{ debounce: 3000 }"
在搜索模块中等待几秒钟不是很符合人体工程学/用户友好。
我们通常做的是每次用户输入新字符时取消之前的请求。
您可以通过向 timeout
属性 的 $http 请求传递一个承诺来做到这一点。
$http.get(request, {timeout: promise}).then...
您在搜索功能开始时初始化承诺:
abort = $q.defer();
这样,每次调用该函数时,您都可以在发出新请求之前检查是否有承诺并解决(取消)它。
if(abort) {
abort.resolve();
}
查看 working plunker。 (并打开控制台以查看在您键入时取消的请求。)