在观察器中去抖函数执行 (AngularJS)

Question

我监视 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;
}

Answer 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);

});

在观察器中去抖函数执行 (AngularJS)

Debounce a function execution in a watcher (AngularJS)

javascript

watch

angularjs

lodash

debounce