javascript - 在复选框上使用 debounce Angular

Question

我正在处理用于过滤一组数据的多个复选框。但是，我不希望复选框在每次单击复选框后触发过滤器，因此我想对其进行去抖处理。在选择最后一个复选框后，可能要等待 500 毫秒到一秒。

查看我的plnkr

     <input type="checkbox"
       ng-model="user.cool"
       ng-model-options="{ debounce: 1000 }"/>
 <input type="checkbox"
       ng-model="user.lame"
       ng-model-options="{ debounce: 1000 }"/>

这里它基本上只是将复选框单击选项排队并每隔几秒更改模型，但我希望它同时更改两者。我怎样才能做到这一点？

谢谢!

Answer 1

您可以在应用 Controller 中使用$scope.$watch来控制多个模型属性更改的结果。 $watch 不仅可以计算单个属性，还可以计算表达式；然后回调可以去抖；稍后通过调用 $scope.$apply 通知 Angular 有关所需的更改。

$scope.$watch('user.lame + user.cool', _.debounce(function (id) {
   $scope.$apply(function() {
      //code that updates UI
   })
}, 1000));

另请查看此帖子:Can I debounce or throttle a watched <input> in AngularJS using _lodash?

这是更新后的 plunk:https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview