在观察者（AngularJS）中反跳函数执行答案

【问题标题】：Debounce a function execution in a watcher (AngularJS)在观察者（AngularJS）中反跳函数执行
【发布时间】：2018-02-01 16:08:08
【问题描述】：

我有一个vm.search 变量的手表，它是一个输入元素的 ng 模型。当我输入某些内容时，我想使用 delayedSave 函数将其保存到数据库中，但我不想保存用户输入的所有内容。所以我决定使用 lodash _.debounce 函数，但问题是这个函数在 $scope.$watch 中不能正常工作。 delayedSave 的执行次数与 $scope.$watch 函数一样多。

$scope.$watch('vm.search', nv => {
    let savedQuery = _.find(vm.searchQueries, {query: nv});

    if (savedQuery) {
      vm.currentSearchQuery = savedQuery;
    }

    let runDebounce = _.debounce(delayedSave, 1000);

    runDebounce(nv);

});

我可以将 debounce 设置为$watch 的回调，但我需要执行代码，我写在下面，每次vm.seach 发生变化。

let savedQuery = _.find(vm.searchQueries, {query: nv});

if (savedQuery) {
  vm.currentSearchQuery = savedQuery;
}

【问题讨论】：

ng-model 提供带有观察者的双向数据绑定。然后您的文本字段可以是：<input ng-change="your_save_func()" ...，因此您可以完全删除 $watch，只需在控制器中使用您的“保存功能”
@AlekseySolovey ng-change 和$scope.$watch 一样，我也需要执行第一部分的代码。
ng-change 用于 DOM，而 $watch 就像一个 $broadcast 侦听器，用于检测 JS 代码的变化。这是comparison
@AlekseySolovey，让我更简洁：ng-change 似乎没有解决问题。
考虑走ng-change 路线。延迟对模型的更改是您想要的吗？ <input ng-model=".. " ng-model-options="{ debounce: 1000 }" ng-change="save_func()" /> 你的 ng-change 函数和你的模型在 1 秒后才会更新。

标签： javascript angularjs lodash watch debounce

【解决方案1】：

应该重复调用相同的runDebounce 方法以使去抖动工作。由于您在每个摘要循环中重新创建 runDebounce 函数，因此您每次都运行不同的方法。由于没有再次调用该方法，因此去抖动超时过去了，并调用了包装的方法delayedSaved。

将去抖函数runDebounce的创建移出$watch回调：

const runDebounce = _.debounce(delayedSave, 1000);

$scope.$watch('vm.search', nv => {
    const savedQuery = _.find(vm.searchQueries, {query: nv});

    if (savedQuery) {
      vm.currentSearchQuery = savedQuery;
    }

    runDebounce(nv);

});

【讨论】：