[解決済み] 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は内部的にこれを行い、ドキュメントやここの他のトピックを読んだ後、私は特定の答えを見つけることができませんでした。

インスタント検索を遅らせる方法について、何かご指摘があれば幸いです。

解決方法は？

(Angular 1.3の解決策は以下の回答を参照してください。)

ここでの問題は、モデルが変更されるたびに、つまり入力に対するキー操作のたびに、検索が実行されることです。

これを行うにはよりクリーンな方法がありますが、おそらく最も簡単な方法は、バインディングを切り替えて、フィルタが動作するコントローラ内で$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>