web-dev-qa-db-ja.com

AngularJSインスタント検索を遅らせる方法は？

私はAngularJSに慣れていないので、対処できないようなパフォーマンスの問題があります。私はインスタント検索をしていますが、それぞれのkeyup（）で検索を開始するので多少時間がかかります。

JS：

var App = angular.module('App', []);

App.controller('DisplayController', function($scope, $http) {
$http.get('data.json').then(function(result){
    $scope.entries = result.data;
});
});

HTML：

<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:searchText">
<span>{{entry.content}}</span>
</div>

JSONデータはそれほど大きくない、300KBだけです、私が達成する必要があるのは私が達成する必要があることがユーザーがタイプ入力を終了するのを待つために検索に最大1秒の遅れを置くことではなくです。 AngularJSはこれを内部で行っていますが、ここでドキュメントやその他のトピックを読んだ後で、具体的な答えが見つかりませんでした。

どうすればインスタント検索を遅らせることができるかについてのご意見をお寄せください。ありがとう。

searchfilterangularjstimeoutdelay
147
braincomb

（Angular 1.3の解決策については、以下の回答を参照してください。）

ここでの問題は、モデルが変更されるたびに検索が実行されることです。これは、入力に対するすべてのキーアップアクションです。

これを行うにはもっときれいな方法がありますが、おそらく最も簡単な方法はあなたのフィルタが動作するあなたのControllerの中で定義された$ scopeプロパティを持つようにバインディングを切り替えることでしょう。こうすることで、その$ scope変数が更新される頻度を制御できます。このようなもの：

JS：

var App = angular.module('App', []);

App.controller('DisplayController', function($scope, $http, $timeout) {
    $http.get('data.json').then(function(result){
        $scope.entries = result.data;
    });

    // This is what you will bind the filter to
    $scope.filterText = '';

    // Instantiate these variables outside the watch
    var tempFilterText = '',
        filterTextTimeout;
    $scope.$watch('searchText', function (val) {
        if (filterTextTimeout) $timeout.cancel(filterTextTimeout);

        tempFilterText = val;
        filterTextTimeout = $timeout(function() {
            $scope.filterText = tempFilterText;
        }, 250); // delay 250 ms
    })
});

HTML：

<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:filterText">
    <span>{{entry.content}}</span>
</div>
121
Jason Aden

UPDATE

今ではこれまで以上に簡単になりました（Angular 1.3）。モデルにデバウンスオプションを追加するだけです。

<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">

更新プランカー：
http://plnkr.co/edit/4V13gK

NgModelOptionsに関するドキュメント：
https://docs.angularjs.org/api/ng/directive/ngModelOptions

古い方法：

これは、角度を超えた依存関係のない別の方法です。

タイムアウトを設定して現在の文字列を過去のバージョンと比較する必要があります。両方が同じ場合は検索が実行されます。

$scope.$watch('searchStr', function (tmpStr)
{
  if (!tmpStr || tmpStr.length == 0)
    return 0;
   $timeout(function() {

    // if searchStr is still the same..
    // go ahead and retrieve the data
    if (tmpStr === $scope.searchStr)
    {
      $http.get('//echo.jsontest.com/res/'+ tmpStr).success(function(data) {
        // update the textarea
        $scope.responseData = data.res; 
      });
    }
  }, 1000);
});

そしてこれはあなたの見解に入ります：

<input type="text" data-ng-model="searchStr">

<textarea> {{responseData}} </textarea>

必須のプランカー： http://plnkr.co/dAPmwf

297
Josue Alexander Ibarra

Angular 1.3では、こうします。

HTML：

<input ng-model="msg" ng-model-options="{debounce: 1000}">

コントローラ：

$scope.$watch('variableName', function(nVal, oVal) {
    if (nVal !== oVal) {
        myDebouncedFunction();
    }
});

基本的に、msgスコープ変数が変更されたときに、myDebouncedFunction（）を実行するようにAngularに指示します。属性ng-model-options = "{debounce：1000}"はmsgが1秒に1回しか更新できないようにします。

33
Michael Falck Wedelgård
 <input type="text"
    ng-model ="criteria.searchtext""  
    ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
    class="form-control" 
    placeholder="Search" >

これで、ng-model-optionsのデバウンスを時間とともに設定できるようになり、ぼやけたときにモデルをすぐに変更する必要がある場合を除き、遅延が完了しない場合は古い値になります。

10
Ali Adravi

HTMLマークアップでkeyup/keydownを使っている人のためのものです。これはwatchを使いません。

JS

app.controller('SearchCtrl', function ($scope, $http, $timeout) {
  var promise = '';
  $scope.search = function() {
    if(promise){
      $timeout.cancel(promise);
    }
    promise = $timeout(function() {
    //ajax call goes here..
    },2000);
  };
});

HTML

<input type="search" autocomplete="off" ng-model="keywords" ng-keyup="search()" placeholder="Search...">
8
Vinoth

Angularjsのデバウンス/スロットルモデルの更新： http://jsfiddle.net/lgersman/vPsGb/3/

あなたの場合は、jsfiddleコードで次のようにディレクティブを使用する以外に行うべきことはありません。

<input 
    id="searchText" 
    type="search" 
    placeholder="live search..." 
    ng-model="searchText" 
    ng-ampere-debounce
/>

その基本的には "ng-ampere-debounce"という名前の単一の角度付きディレクティブからなる小さなコード片 http://benalman.com/projects/jquery-throttle-debounce-plugin/ を利用することができます任意のDOM要素に接続されています。ディレクティブは、いつイベントを調整するかを制御できるように、アタッチされたイベントハンドラを並べ替えます。

あなたはスロットル/デバウンスのためにそれを使うことができます*モデル角度アップデート*角度イベントハンドラng- [event] * jqueryイベントハンドラ

見てください： http://jsfiddle.net/lgersman/vPsGb/3/

ディレクティブはOrangevolt Ampereフレームワークの一部になります（ https://github.com/lgersman/jquery.orangevolt-ampere ）。

6
lgersman

ここにリダイレクトされたユーザーのためだけに：

Angular 1.3で紹介されているように、 ng-model-options attributeを使うことができます。

<input 
       id="searchText" 
       type="search" 
       placeholder="live search..." 
       ng-model="searchText"
       ng-model-options="{ debounce: 250 }"
/>
6
Morteza Tourani

私はこの問題を解決する最良の方法はBen Almanのプラグイン jQueryスロットル/デバウンス を使うことだと思います。私の意見では、あなたのフォームのあらゆる分野のイベントを遅らせる必要はありません。

$ scope。$ウォッチ処理関数を$ .debounceで次のようにラップするだけです。

$scope.$watch("searchText", $.debounce(1000, function() {
    console.log($scope.searchText);
}), true);
5
Daniel Popov

別の解決策はモデル更新に遅延機能を追加することです。簡単なディレクティブはトリックをするようです：

app.directive('delayedModel', function() {
    return {
        scope: {
            model: '=delayedModel'
        },
        link: function(scope, element, attrs) {

            element.val(scope.model);

            scope.$watch('model', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.val(scope.model);        
                }
            });

            var timeout;
            element.on('keyup paste search', function() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    scope.model = element[0].value;
                    element.val(scope.model);
                    scope.$apply();
                }, attrs.delay || 500);
            });
        }
    };
});

使用法：

<input delayed-model="searchText" data-delay="500" id="searchText" type="search" placeholder="live search..." />

そのため、delayed-modelの代わりにng-modelを使用して、必要なdata-delayを定義するだけです。

デモ： http://plnkr.co/edit/OmB4C3jtUD2Wjq5kzTSU?p=preview

3
dfsq

なぜ誰もがwatchを使いたいのですか？関数を使うこともできます：

var tempArticleSearchTerm;
$scope.lookupArticle = function (val) {
    tempArticleSearchTerm = val;

    $timeout(function () {
        if (val == tempArticleSearchTerm) {
            //function you want to execute after 250ms, if the value as changed

        }
    }, 250);
};
0
NicoJuicy

Angular 1.3ではng-model-optionsがデバウンスされますが、それまではJosue Ibarraが言ったようにタイマーを使用する必要があります。しかし、彼のコードでは、キーを押すたびにタイマーを起動します。また、Angular内でsetTimeoutを使用しているのは、$ timeoutを使用するか、setTimeoutの最後に$ applyを使用する必要がある場合です。

0
F.A.

私がここで最も簡単な方法はjsonをプリロードするか、on$dirtyで一度ロードすることであり、それからフィルタ検索が残りの面倒を見るでしょう。これにより、余分なhttp呼び出しが節約され、データがプリロードされているためはるかに高速になります。記憶は痛くなりますが、その価値はあります。

0
NateNjugush

この問題を解決するには、基本的に実際のng-modelをディレクティブで監視している特殊な属性にバインドし、デバウンスサービスを使用してディレクティブ属性を更新します。彼はng-modelの代わりにdebounce-modelにバインドします。

.directive('debounceDelay', function ($compile, $debounce) {
return {
  replace: false,
  scope: {
    debounceModel: '='
  },
  link: function (scope, element, attr) {
    var delay= attr.debounceDelay;
    var applyFunc = function () {
      scope.debounceModel = scope.model;
    }
    scope.model = scope.debounceModel;
    scope.$watch('model', function(){
      $debounce(applyFunc, delay);
    });
    attr.$set('ngModel', 'model');
    element.removeAttr('debounce-delay'); // so the next $compile won't run it again!

   $compile(element)(scope);
  }
};
});

使用法：

<input type="text" debounce-delay="1000" debounce-model="search"></input>

そしてコントローラーで：

    $scope.search = "";
    $scope.$watch('search', function (newVal, oldVal) {
      if(newVal === oldVal){
        return;
      }else{ //do something meaningful }

jsfiddleでのデモ： http://jsfiddle.net/6K7Kd/37/

$ debounceサービスはこちらで見つけることができます： http://jsfiddle.net/Warspawn/6K7Kd/

finallyBindディレクティブに触発されましたhttp://jsfiddle.net/fctZH/12/

0
Ofir D