使用`ng-model-options`

Question

我有一段代码如下。它通过运行treat：

来响应输入字段的更改

<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  </head>
  <body ng-controller="Ctrl">
    <input type="text" ng-model="text"></input>
    <div id="console"></div>
    <script>
      var app = angular.module('app', []);
      app.controller('Ctrl', ["$scope", function ($scope) {
        $scope.$watch('text', function (newValue, oldValue) {
          treat(newValue);
        }, false)
      }])

      function treat(x) {
        debug(x)
      }

      function debug(msg) {
        document.getElementById("console").innerHTML += msg + "<br/>";
      }
    </script>
  </body>
</html>

现在，我想做一些特别的事情：我想在2 500 ms之间设置一个最小间隔（比如treat）。因此，如果另一个treat应该在treat之后很快运行，我希望它等一下;如果2 treat之间的时间间隔大于500 ms，则它们可以正常运行（我不想在其上添加500 ms）。

有谁知道如何实现这一目标？

Answer 1

而不是使用$watch使用ng-change directive并限制对treat函数的调用次数，请使用ng-model-options directive的debounce属性：

<input type="text" name="userName"
       ng-model="user.name"
       ng-change="treat()"
       ng-model-options="{ debounce: 1000 }" />

上面的示例在模型更新和调用treat函数之间等待一秒钟。

使用ng-model-options
宣布模型更新
debounce属性允许您指定去抖动延迟，以便实际更新仅在计时器到期时发生;在另一次更改发生后，此计时器将被重置。

— AngularJS ng-model-options API Reference (Debouncing)

The DEMO

＆＃13;

angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.user = { name: 'say' };
  $scope.updates = 0;
  $scope.treat = function() {
    $scope.updates++;
  };
}]);

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="optionsExample">
    <div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-change="treat()"
           ng-model-options="{ debounce: 1000 }" />
    <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
  <pre>Number of calls to treat() = {{updates}}</pre>
</div>
  </body>

＆＃13;

Answer 2

如果一个元素被取出并且每500毫秒执行一次，你就可以实现一个qeue：

var qeue=[];
function treat(x) {
   qeue.unshift(x);
}
setInterval(function(){
 if(qeue.length){
   debug(qeue.pop())
 }
},500);

如果你想在qeue为空时停止：

var qeue=[];
function treat(x) {
   qeue.unshift(x);
}
(function next(){
 if(qeue.length){
   debug(qeue.pop());
   setTimeout(next,500);
 }else{
  qeue.unshift=function(x){
    qeue=[x];
    next();
   };
 }
})();

设置函数调用之间的最小时间间隔

2 个答案:

使用`ng-model-options`

The DEMO