使用Angular去抖时如何防止因导航导致的数据丢失?

时间:2015-11-20 17:21:33

标签: angularjs debouncing

我最近熟悉了Angular的去抖功能。我用于去抖的用例是我想保存(服务器端)用户键入的内容,但我不希望每次击键都有HTTP请求。赋予我的表格去抖动值500允许在用户停止键入半秒而不必单击[保存]按钮时保存数据。这很方便。

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

在上面的示例中,用户可能会键入“Hello!”,等待半秒,然后键入“Great to meet you!”,然后在去抖期到期之前导航到另一个页面或关闭浏览器。 (这不是牵强附会,特别是如果文本输入靠近导航控件。)在这种情况下,“你好!”得救,但“很高兴见到你!”迷路了。

我看到页面(通常是广告上的页面)在您离开页面时会触发令人讨厌的Javascript,所以我想知道Angular是否有一些功能可以执行当用户在去抖期到期时发生的任何事情离开了页面。

当然,我意识到有一些特殊情况,例如断电,无论如何都会导致数据丢失!

1 个答案:

答案 0 :(得分: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