我有這個搜索框指令
// Define the search-box
alSH.directive('searchBox',[function(){
return {
restrict: 'E',
template: `
<input
placeholder="Search.."
ng-keyup=search($evt)
ng-model="query"
ng-model-options="{ debounce: 1000 }"
/>`,
controller: function SearchBoxController($scope, helper) {
$scope.query = ''; //ng model
$scope.search = function() { //this calls in every keyup event
helper.setQuery($scope.query).search();
};
helper.setQuery('').search();
}
};
}]);
我嘗試使用ng-model-options="{ debounce: 1000 }"，但它仍然為每個擊鍵發送一個網路請求，而沒有更新ng-model可能是由于ng-keyup.
我發現這篇文章要求類似的東西，但我似乎不明白解決方案
我添加了一個codepen演示，其中包含我試圖實作此行為的上述代碼片段
理想情況下，我想限制由于每次擊鍵而發送的后端呼叫的數量。知道如何實作這一目標嗎？
uj5u.com熱心網友回復：
您可以使用類似的模式來做到這一點：
var debounceTimer = false;
$scope.search= function() {
// if there's already a timeout going, cancel the current one
if (debounceTimer) {
$timeout.cancel(debounceTimer);
}
// create a new timeout, do your thing when it ellapses
debounceTimer = $timeout(function() {
// ... your action goes here, only if calls are made with at least ONE second interval ...
helper.setQuery($scope.query).search();
},
// adjust your time interval accordingly
1000);
};
uj5u.com熱心網友回復：
簡短的回答：使用ng-change而不是ng-keyup.
長答案：
通常使用 ng-keyup 是錯誤的，因為有很多方法可以修改輸入值（例如拖放），還有一些鍵不會修改輸入值，例如 Esc 鍵。這就是為什么你應該始終小心使用 keyup 并更好地使用輸入更改事件。
如果你使用 ng-model，你應該需要 ngModel 指令，注入并使用 ngModelCtrl。這就是 ng-change 為您做的事情：https ://github.com/angular/angular.js/blob/9bff2ce8fb170d7a33d3ad551922d7e23e9f82fc/src/ng/directive/ngChange.js
在簡單的場景中，你不需要知道所有這些，你可以堅持使用ng-change ng-model-options，對于非常特殊的情況，當內置的可能性不夠時，有一些奇怪的去抖動/節流/任何邏輯，你可以撰寫自定義的 egmy-change指令，它的作業方式類似。
uj5u.com熱心網友回復：
在使用此處提供的答案進行一些測驗后，我設法添加了去抖動功能。
我洗掉了ng-keyup=search($evt)但保留了ng-model-options="{ debounce: 1000 }".
然后在控制器中添加了一個觀察者，它跟蹤$scope.query觸發搜索功能的變數。為了簡單起見，我沒有使用 的值，newValue但oldValue如果需要，也可以使用這些值來實作額外的功能。解決了密碼筆
$scope.$watch('query', function (newValue, oldValue) {
$scope.search();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/464225.html