我有以下代码监视<input>绑定到$ scope.id 的字段。每次输入字段值更改时,都会执行watch函数:
<input>
$scope.$watch("id", function (id) { // code that does something based on $scope.id });
有没有一种方法可以对此设置超时或用_lodash进行反跳,以便在用户更改值时不会在每次按键时执行代码。
我想要的是延迟一秒钟,以便在用户停止键入一秒钟后,手表中的代码块就会运行。请注意,输入值可能随时更改。例如,如果值是“ 1”或“ 10”或“ 1000”,则需要调用该函数。这类似于带有建议的搜索框在Google中的工作方式。如果用户输入999,则需要调用该函数。如果他删除了9,那么它就是99,那么我需要调用该函数。
我确实有_lodash,因此使用的解决方案可能最适合我的需求。
那是你要找的东西吗
$scope.$watch("id", _.debounce(function (id) { // Code that does something based on $scope.id // This code will be invoked after 1 second from the last time 'id' has changed. }, 1000));
但是请注意,如果您想在该函数内更改$ scope,则应将其包装$scope.$apply(...)为除非_.debounce函数在$timeout内部使用(据我所知它没有使用),Angular不会知道您对进行的更改$scope。
$scope.$apply(...)
_.debounce
$timeout
$scope
更新
关于更新的问题-是的,您需要使用以下命令包装整个回调函数主体
$scope.$apply():
$scope.$apply()
$scope.$watch("id", _.debounce(function (id) { // This code will be invoked after 1 second from the last time 'id' has changed. $scope.$apply(function(){ // Code that does something based on $scope.id }) }, 1000));