각도 변경 지연


117

변경시 ng-repeat 목록을 필터링하는 입력이 있습니다. 반복은 많은 데이터를 포함하며 모든 것을 필터링하는 데 몇 초가 걸립니다. 필터링 프로세스를 시작하기 전에 0.5 초 지연되기를 원합니다. 이 지연을 생성하는 올바른 각도 방법은 무엇입니까?

입력

 <input ng-model="xyz" ng-change="FilterByName()" />

반복

 <div ng-repeat"foo in bar">
      <p>{{foo.bar}}</p>
 </div>

필터 기능

 $scope.FilterByName = function () {
      //Filtering Stuff Here
 });

감사


1
$timeout500ms 동안 a 를 사용하십시오 . $scope.FilterByName = function () { $timeout(_filterByName , 500)
PSL 2014 년

@PSL 함수는 어디에 있습니까? 검색이 한 번만 실행되기를 원합니다. 그냥 오프셋하면 더 큰 지연이 발생하고 여러 검색을 수행합니다.
MGot90 2014 년

네, 당신의 기능에서. 이전 댓글에 스 니펫이 있습니다. $timeout.cancel(timeoutpromise)한 시간 초과가 진행 중이고 다른 변경이 트리거되는 경우 사용할 수 있습니다 .
PSL


1
@PSL 감사합니다.
MGot90

답변:


273

AngularJS 1.3 이상

AngularJS 1.3부터는 전혀 사용하지 않고도 매우 쉽게 얻을 수있는 debounce속성을 활용할 수 있습니다 . 예를 들면 다음과 같습니다.ngModelOptions$timeout

HTML :

<div ng-app='app' ng-controller='Ctrl'>
    <input type='text' placeholder='Type a name..'
        ng-model='vm.name'
        ng-model-options='{ debounce: 1000 }'
        ng-change='vm.greet()'
    />

    <p ng-bind='vm.greeting'></p>
</div>

JS :

angular.module('app', [])
.controller('Ctrl', [
    '$scope',
    '$log',
    function($scope, $log){
        var vm = $scope.vm = {};

        vm.name = '';
        vm.greeting = '';
        vm.greet = function greet(){
            vm.greeting = vm.name ? 'Hey, ' + vm.name + '!' : '';
            $log.info(vm.greeting);
        };
    }
]);

-또는-

바이올린 확인

AngularJS 1.3 이전

지연을 추가하려면 $ timeout을 사용해야하며 $ timeout.cancel (previoustimeout)을 사용하면 이전 제한 시간을 취소하고 새 제한 시간을 실행할 수 있습니다 (필터링이 한 시간 내에 여러 번 연속적으로 실행되는 것을 방지하는 데 도움이됩니다. 시간 간격)

예를 들면 다음과 같습니다.

app.controller('MainCtrl', function($scope, $timeout) {
    var _timeout;

    //...
    //...

    $scope.FilterByName = function() {
        if(_timeout) { // if there is already a timeout in process cancel it
            $timeout.cancel(_timeout);
        }
        _timeout = $timeout(function() {
            console.log('filtering');
            _timeout = null;
        }, 500);
    }
});

2
ng-model-options에서만 추가 된 각도 1.3 (과에서 디 바운스 속성 beta.8 ). 여전히 이전 버전의 Angular를 사용해야하는 사람들은 PSL의 솔루션과 같은 다른 솔루션에 의존하거나 ng-debounce 와 같은 외부 모듈을 사용해야합니다 .
Vincent Sels 2015

단점은 이것이 ng-pattern과 같은 유효성 검사를 지연시키는 것처럼 보일 수 있다는 것입니다.
Johan Baaij

19

$timeout지연을 추가하는 데 사용할 수 있으며 아마도 사용 $timeout.cancel(previoustimeout)하면 이전 제한 시간을 취소하고 새 제한 시간을 실행할 수 있습니다 (시간 간격 내에서 필터링이 여러 번 연속적으로 실행되는 것을 방지하는 데 도움이 됨)

예:-

app.controller('MainCtrl', function($scope, $timeout) {
  var _timeout;

 //...
 //...

  $scope.FilterByName = function () {
    if(_timeout){ //if there is already a timeout in process cancel it
      $timeout.cancel(_timeout);
    }
    _timeout = $timeout(function(){
      console.log('filtering');
      _timeout = null;
    },500);
  }
 });

Plnkr


8
다운 보터 및 향후 방문자에게 :이 답변은 Angular 1.2.x 에 추가되었으며 , 아마도 1.3.x가 출시되기 전에 추가되었습니다. ng-model-options와 함께 디 바운스 옵션이 있고 더 나은 답변을 수정할 기회가 없었습니다. @rckd의 답변이 들어 왔습니다 (이번에 약 3 개월 후).
PSL

4
angular js 1.4를 사용하고 있지만 ng-change모델을 디 바운스하고 싶지 않을 때 $ timeout 솔루션이 여전히 유용하다는 것을 알 수 있습니다.
SStanley

8

질문이 너무 오래되었다는 것을 알고 있습니다. 그러나 여전히 디 바운싱을 사용하여이를 달성하는 더 빠른 방법을 제공하고 싶습니다 .

따라서 코드는 다음과 같이 작성할 수 있습니다.

<input ng-model="xyz" ng-change="FilterByName()" ng-model-options="{debounce: 500}"/>

디 바운스는 밀리 초 단위의 숫자를 사용합니다.


0

또는 angular-ui 에서 'typeahead-wait-ms = "1000"'지시문을 사용할 수 있습니다.

<input 
   typeahead="name for name in filterWasChanged()"
   typeahead-wait-ms="1000"
   type="text" placeholder="search"
   class="form-control" style="text-align: right" 
   ng-model="templates.model.filters.name">
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.