2017-03-20 1 views
1

私は遅延の主な目標はありません検索入力の各新しい文字ではなく、少なくともいくつかの文字を修正した後watchをトリガーされた時計をトリガーする検索入力を持ち、その後、DB

に新しい要求を送信
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); 

残念ながら、この時計はすべての要求をキューに入れて、遅延後にすべての要求を実行します。

私に助けてください

+3

: //docs.angularjs.org/api/ng/directive/ngModelOptions)を 'debouce'プロパティで置き換えます。したがって、コードは、 ' – George

+0

あなたはどこでこの機能を誘発していますか? –

答えて

4

を遅らせるために$timeoutを使用して角度がわずかに異なる方法で、内蔵のこのようなものが付属しています。 私はこのようにそれをやって示唆し、変更を遅らせる部分がng-model-options

である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 }" /> 

ます。また利用したいことがあり入力の種類検索

+0

すごい!どうもありがとう! –

0

更新

あなたは

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

ジョージで示唆したようにあなたはNG-モデル・オプションを使用することができ、発射NG-変更前の数ミリ秒待つしたい場合

あなたが書いた方法を主張するなら、あなたは以下のコードを使用することができます

角度は自動的に検索プロパティを更新するので、$scope.$watchは不要です。だから、実行

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

これは、あなたが入力を遅らせることによって時計を作成するのを遅らせるものですが、時計が登録された後もすべての文字を押すと引き続きトリガーされます。 –

+0

@GiovaniVercauteren更新された回答を参照 –

+0

更新された回答の唯一の有用な部分はngModelOptionsです。 ngModelOptionsを追加した後、タイムアウトの2番目の部分はもう使用されません。 –

0

コードでは$timeoutの引数ではなく、$watchの3番目の引数です。正常に動作するはずです以下:

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); 
}); 
あなたは[NG-変更](https://docs.angularjs.org/api/ng/directive/ngChange)と[NG-モデルのオプション](httpsを使用することができます
関連する問題