Javascript 输入字段(ng模式)完成后的事件($watch)
我有一个文本输入字段,要求输入名称:Javascript 输入字段(ng模式)完成后的事件($watch),javascript,jquery,html,angularjs,watch,Javascript,Jquery,Html,Angularjs,Watch,我有一个文本输入字段,要求输入名称: <input type="text" ng-modal="form.name" placeholder="Enter NAME"> 每次出现字母时都会调用foo,但我希望只能在输入字段完成时调用foo(通过取消选择输入字段或其他触发器) foo()是一个昂贵的调用,我只想在输入字段完成后执行 注意:在这个过程之后将有多个输入字段,所以我不希望每个字段都有一个按钮,也不希望一次完成所有输入字段 我强烈建议您查看Lodash/下划线以获得此类帮助
<input type="text" ng-modal="form.name" placeholder="Enter NAME">
每次出现字母时都会调用foo,但我希望只能在输入字段完成时调用foo(通过取消选择输入字段或其他触发器)
foo()是一个昂贵的调用,我只想在输入字段完成后执行
注意:在这个过程之后将有多个输入字段,所以我不希望每个字段都有一个按钮,也不希望一次完成所有输入字段 我强烈建议您查看Lodash/下划线以获得此类帮助 这些库为使用集合、对象和(对您来说最重要的)函数提供了极好的帮助方法 解决你问题的方法是
\uu.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
它才会执行。这是自动完成样式框的完美选择,它似乎与您正在处理的类似。它对于窗口大小调整、动画导航和自定义标记编辑器也非常有用。您可以在angular 1.3中使用:
<input type="text" ng-modal="form.name" placeholder="Enter NAME"
ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }">
现在,只有在输入失去焦点或用户停止键入500毫秒后,您的模型才会更新。使用“哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦。然而,我仍然对其他解决方案感到好奇,特别是如果模式被传递到另一个指令:)假设我在一秒钟内键入5个字母,所有5个调用是否都将等待200ms,它们是否异步?假设你在100ms内键入5个字母。由于我们指定了200毫秒的延迟,它只会执行一次,即在最后一个键按下200毫秒后执行一次。另一方面,如果你每1000毫秒键入一个键,那么每次都会执行,因为每次通话之间至少有200毫秒。没问题,我很高兴@MajoB有了简单的答案
debounce
内置,太棒了!除了下划线/Lodash之外,我在任何地方都没见过它。
<input type="text" ng-modal="form.name" placeholder="Enter NAME"
ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }">