使用 Angular debounce 时如何防止导航导致数据丢失？

Question

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

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

在上面的示例中，用户可能会键入 "Hello!"，等待半秒钟，然后键入 "Great to meet you!"，然后导航到另一个页面或在去抖期到期之前关闭浏览器。（这并不牵强，尤其是当文本输入靠近导航控件时。）在这种情况下，"Hello!" 得到保存，但 "Great to meet you!" 丢失。

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

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

Answer 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

笨蛋：http://plnkr.co/edit/dhVl9mtqiE4APQmP9MOQ

使用 Angular debounce 时如何防止导航导致数据丢失？

How to prevent data loss due to navigation when using Angular debounce?

angularjs

debouncing