如何在延迟 2 秒后触发$watch或执行范围订阅属性的最后一个条件

Question

>我有一个搜索输入，它会触发监视，然后向数据库发送新请求

var timeoutPromise;
var delayInMs = 2000;
$scope.$watch('search', function() {
    $timeout.cancel(timeoutPromise); 
    timeoutPromise = $timeout(function(){ 
        $scope.nameFilter = '&filter[]=Name,cs,' + $scope.search;
        $scope.updatePage(1);
    });
}, delayInMs);

延迟的主要目标是触发watch不是搜索输入中的每个新字符，而是在修改至少几个字母之后触发。

不幸的是，此手表只是将所有请求放入队列并在延迟后执行所有请求。

请帮助我

Answer 1

Angular内置了这样的东西，只是方式略有不同。我建议这样做，延迟更改的部分在 ng 模型选项中

.JS

$scope.search = "";
$scope.searchFunction = function(){ 
    $scope.nameFilter = '&filter[]=Name,cs,' + $scope.search;
    $scope.updatePage(1);
}

.HTML

<input type="text" ng-model="search" ng-change="searchFunction()" ng-model-options="{ debounce: 2000 }" />

您可能还想利用输入类型搜索

Answer 2

在您的代码中，delayInMs 是要$watch的第三个参数，而不是要$timeout的参数。以下内容应正常工作：

var timeoutPromise;
var delayInMs = 2000;
$scope.$watch('search', function() {
    $timeout.cancel(timeoutPromise); 
    timeoutPromise = $timeout(function(){ 
        $scope.nameFilter = '&filter[]=Name,cs,' + $scope.search;
        $scope.updatePage(1);
    }, delayInMs);
});

Answer 3

更新

如果你想在触发ng-change之前等待几毫秒，你可以按照George 的建议使用ng-model-options

<input type="search" ng-model="search" ng-change="searchFunction()" ng-model-options="{ debounce: 2000 }" />

---

如果你坚持按照你编写的方式做，你可以使用以下代码

您不需要$scope.$watch因为角度会自动更新搜索属性。所以使用$timeout来延迟执行

var timeoutPromise;
var delayInMs = 2000;
timeoutPromise = $timeout(function() {
        $timeout.cancel(timeoutPromise);
        $scope.nameFilter = '&filter[]=Name,cs,' + $scope.search;
        $scope.updatePage(1);
}, delayInMs);