2

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

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

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

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

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

4

1 回答 1

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

于 2015-11-20T17:24:56.153 回答