Question

我有一个文本输入字段，要求输入名称：

<input type="text" ng-modal="form.name" placeholder="Enter NAME">

我有一个监听form.name

的监视功能

scope.$watch('form.name', function(newValue, oldValue) {
    //TODO: foo()
});

每次出现一个字母时都会调用foo，但是我想在输入字段完成后才能调用foo（通过取消选择输入字段或其他触发器）。

foo（）是一个昂贵的调用，我只想在输入字段完成后才会这样做。

注意：此过程后会有多个输入字段，因此我不希望每个按钮都有一个按钮，或者一次完成所有操作。

Answer 1

我强烈建议您查看 Lodash / UnderscoreJS 以获取此类帮助。

这些库为处理集合，对象和（最重要的是）函数提供了很棒的辅助方法。

解决问题的方法是_.debounce(func, [wait=0], [options])。

_.debounce的基本要点是防止呼叫快速连续发生。如果在一定时间内没有调用该方法，那么该方法将实际执行。

示例：

foo = _.debounce(foo, 200); // foo will now only execute 
                            //  after it has not been called for 200ms.

scope.$watch('form.name', function(newValue, oldValue) {
    foo(); // Expensive call that updates something...
});

在这个例子中，我可以根据需要多次调用foo，但是在我调用它之后它才会被200ms执行。这非常适合自动完成的样式盒，这与您正在使用的类似。它对于窗口调整大小，动画导航和自定义降价编辑器来说也非常棒。

Answer 2

您可以使用角度1.3中的ngModelOptions：

<input type="text" ng-modal="form.name" placeholder="Enter NAME"          
 ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }">

现在，只有在输入失去焦点或用户停止输入500毫秒后，您的模型才会更新。

输入字段（ng-modal）完成后的事件（$ watch）

2 个答案: