如何显式覆盖 AngularJS 模型去抖动？答案

【问题标题】：How to explicitly override AngularJS model debouncing?如何显式覆盖 AngularJS 模型去抖动？
【发布时间】：2018-07-17 09:52:52
【问题描述】：

在我们的 AngularJS 1.* 应用程序的一个页面上，我正在查看一个文本输入¹，它的 debounce 设置为大于零的值。大致是这样配置的：

<input type="text" data-ng-model="data.value1"
       ng-model-options="{ updateOn: 'default blur', debounce: { default: 2500, blur: 0 }}"
       data-ng-change="onValueChanged()">

通过该文本输入输入的数据在单击按钮或按下 Enter 键时进行处理。

现在，问题是当用户在更改值后立即点击 Enter 时，由于去抖动设置，新值尚未在模型中。

我能找到talks about using ngSubmit instead of ngClick 的唯一解决方案提示，但我们既没有使用表单元素，也没有使用ngClick（至少后者不重要）。 Enter 按键通过keydown 事件在自定义指令中捕获。

我能否以某种方式强制 AngularJS 跳过去抖动期并立即在该 keydown 事件的处理程序中根据我的命令更新模型？

请注意，一个明显的解决方法是使用比keydown 处理程序中的去抖延迟稍高的$timeout，以确保模型已更新。不过，这对我来说真的很奇怪，而且也与用户期望在按下 Enter 键时立即做出反应的期望相冲突。

¹：实际上，它是一个动态生成的 UI，可以在嵌套容器中包含任意数量的此类文本输入。

【问题讨论】：

只是好奇，你为什么首先使用debounce？当你想覆盖
@Satpal：我只想在 Return 按键的特定事件中覆盖去抖动。开发这部分 UI 的人坚持认为，由于与模型耦合并在其中发生变化的各种逻辑片段，去抖动在所有其他情况下都是必不可少的。

标签： javascript angularjs debouncing debounce

【解决方案1】：

最后，我放弃了基于 AngularJS 的 debounce 选项。

相反，我在更改输入模型时调用的任何地方都使用了_.debounce from the lodash library。 _.debounce 提供了一个 flush() 方法，该方法将在适当的情况下强制立即调用去抖动函数。因此，我现在在响应 Enter 键的击键时调用该方法。

【讨论】：

【解决方案2】：

我设法通过触发“提交”事件的自定义指令解决了这个问题：

angular.module('...')
.directive('submitListener', () =>
    ({
        restrict: 'A',
        require: 'ngModel',
        link(scope, elem, attrs, ngModelCtrl) {
            elem.on('keyup', ($event) => {
                if ($event.keyCode === 13) {
                    console.log(`submitted !`)
                    ngModelCtrl.$setViewValue(elem.val(), 'submit')
                }
            })
        },
    })
)

并在输入上使用指令并在 ng-model-options + debounce 配置中配置事件：

<input type="text" data-ng-model="data.value1"
   ng-model-options="{ updateOn: 'default blur submit', debounce: { default: 2500, blur: 0, submit: 0 }}"
   submit-listener
   data-ng-change="onValueChanged()">

【讨论】：