使用 Angular debounce 时如何防止由于导航导致的数据丢失？答案

【问题标题】：How to prevent data loss due to navigation when using Angular debounce?使用 Angular debounce 时如何防止由于导航导致的数据丢失？
【发布时间】：2016-02-23 06:52:37
【问题描述】：

我最近熟悉了 Angular 的去抖动功能。我的 debounce 用例是我想保存（服务器端）用户在键入时键入的内容，但我不希望每次击键都有 HTTP 请求。为我的表单设置一个 500 的去抖动值允许在用户停止输入半秒时保存数据，而无需单击 [保存] 按钮。这很方便。

但是，我发现了一个缺点。特别是如果去抖值很高（我可能希望它取决于有效负载的大小），用户可能会在保存数据之前离开页面。

在上面的示例中，用户可能会键入“Hello！”，等待半秒钟，然后键入“很高兴认识你！”，然后在去抖时间到期之前导航到另一个页面或关闭浏览器。（这并不牵强，尤其是当文本输入靠近导航控件时。）在这种情况下，“你好！”得救了，但“很高兴认识你！”迷路了。

我已经看到页面（通常是充满广告的页面）在您离开页面时会触发令人讨厌的 Javascript，所以我想知道 Angular 是否有一些功能可以执行当用户的去抖动期到期时会发生的任何事情离开页面。

当然，我知道有一些特殊情况，比如掉电，无论如何还是会导致数据丢失！

【问题讨论】：

标签： angularjs debouncing

【解决方案1】：

updateOn 等其他触发器可以与 debounce 结合使用，以微调行为。

在下面的示例中，输入字段中的文本将每 500 毫秒绑定到模型，但是一旦用户离开该字段，它也会立即绑定：

<input type="text" ng-model="myModel" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 }}">
<p>Hello {{myModel}}!</p>

这里我们覆盖了输入字段的default 行为，它希望在每次击键时更新模型。

其他资源：https://docs.angularjs.org/api/ng/directive/ngModelOptions

Plunker：http://plnkr.co/edit/dhVl9mtqiE4APQmP9MOQ

【讨论】：

这是一个好的开始。当用户将焦点从文本区域移开时，该事件肯定会触发，但如果我想两者都做怎么办。假设用户要输入非常大量的文本，我们想要去抖动它，但如果用户导航离开，也要确保保存它？
好点，刚刚更新了答案/plunker。 Angular 允许我们组合触发器以获得更精细的行为，这很好。
感谢@lux 的更新。我还想知道一件事：如果页面上有多个输入，是否需要直接等待将这些设置应用于所有输入？
@DanielAllenLangdon 这是一个很好的问题，答案很好。就我个人而言，我只是编写一个手动添加ngModelOptions 属性的指令，但看起来你可以更加全球化，直接装饰ngModel，似乎有点矫枉过正，但这绝对是一个选择：stackoverflow.com/questions/24707508/…