引入角度变化的延迟答案

【问题标题】：Introduce delay on angular change引入角度变化的延迟
【发布时间】：2014-03-16 17:53:10
【问题描述】：

ng-change 立即触发，但我想在向服务器发送请求之前引入一些延迟。我已经阅读了有关 watch 功能的信息，但似乎没有“简单”的解决方案。

有什么想法可以快速重构以在以下代码中添加简单的延迟？

$scope.searchOrder = null
$scope.change = (text) ->
  search_params = $scope.searchOrder
  $http.get('./api/orders?q=' + search_params).success( (data) ->
    $scope.orders = data
    console.log('Found matching order.')
    #console.log data
  ).error( ->
    console.error('No orders found.')
  )

【问题讨论】：

你看过 $timeout 吗？

标签： angularjs delay

【解决方案1】：

尝试：

var delayDuration = 200;
$scope.searchOrder = null
$scope.change = (text) ->
$timeout( ->
search_params = $scope.searchOrder
      $http.get('./api/orders?q=' + search_params).success( (data) ->
        $scope.orders = data
        console.log('Found matching order.')
        #console.log data
      ).error( ->
        console.error('No orders found.')
      ), delayDuration);

代码应该很容易解释。它只使用AngularJS timeout service。您应该在 js setTimeout 方法上使用它，以便 Angular 知道它何时完成。

【讨论】：

【解决方案2】：

我相信我已经通过创建一个名为 ngDelay 的指令以切题的方式回答了这个问题here。这可以通过正常方式使用 ng-change 来实现。看看，看看有没有帮助。

【讨论】：

【解决方案3】：

您可以利用 ngModelOptions 提供的 debounce 属性来轻松实现这一目标，而无需使用 $timeout。这是一个例子：

JS fiddle example

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 ? 'yo, ' + vm.name + '!' : '';
            $log.info(vm.greeting);
        };
    }]);

【讨论】：