gpt4 book ai didi

javascript - AngularJS - 仅在 ng-change 上触发 $timeout 事件一次

转载 作者:数据小太阳 更新时间:2023-10-29 05:07:44 26 4
gpt4 key购买 nike

我在绑定(bind)到范围变量的 html 输入字段上有一个 ng-change。

<input type="text" ng-model="test" ng-change="change()" required>

var change = function(){ redraw_graph()}

现在,当我更改输入框时,它会为我输入的每个新字符重新绘制图形。我想要延迟(N 秒),所以在 ng-change 事件触发之前,angular 会等待用户完成输入。如果触发了多个 ng-change 事件,它会取消较早的事件,只执行最新的事件。

我已将延迟与超时结合起来,但在 N 秒后,ng-change 事件仍然触发不止一次。我以前解决过这个问题,但我目前不知道该怎么做。

最佳答案

对我来说,您所要求的似乎已经内置到 AngularJS 中。因此,如果您使用 ngModelOptions您可以使用 debounce 属性的指令:

ng-model-options="{ debounce: 1000 }"

引用文档

.."/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place."


工作样本

  angular.module('optionsExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.user = {
name: 'say'
};
}
]);
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Example - example-ngModelOptions-directive-debounce-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<script src="app.js"></script>
</head>

<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text"
name="userName"
ng-model="user.name"
ng-model-options="{ debounce: 1000 }" />
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button>
<br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
</body>

</html>

关于javascript - AngularJS - 仅在 ng-change 上触发 $timeout 事件一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26286403/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com