Question

是否可以向AngularJS $ watch函数添加超时？

例如，假设我有下面的AngularJS代码，它在监视值 myName 。值更改时，侦听器功能将运行。但是，如果该值在一定时间内没有变化，我希望它做其他事情。

具体来说，在下面的代码中，我希望$ scope.nothingEnteredFlag从false更改为true。我的html模板设置为反映该标志的状态（例如，使用ng-show）。

var app = angular.module("helloApp", []);
app.controller("helloCtrl", function($scope) {
    $scope.nothingEnteredFlag=false;
    $scope.$watch("myName", function (newValue, oldValue) {
        if ($scope.myName.length < 5) {
            $scope.message = "Short name!";
        } else {
            $scope.message = "Long name!";
        }
    });
});

请参见fiddle。

我曾尝试用$ timeout将$ watch包围起来，但似乎无法正常工作。

Answer 1

您可以使用角度timeout来获得所需的结果。

var timer;
  var timerFunction = function() {
    timer = $timeout(function() {
      $scope.nothingEnteredFlag = true;
    }, 5000);
  };

这将创建计时器功能

您的控制器应该这样

var app = angular.module("helloApp", []);
app.controller("helloCtrl", function($scope, $timeout) {
  $scope.nothingEnteredFlag = false;
  $scope.myName = "";
  $scope.$watch("myName", function(newValue, oldValue) {
    if ($scope.myName.length < 5) {
      $scope.message = "Short name!";
    } else {
      $scope.message = "Long name!";
    }
    $scope.nothingEnteredFlag = false;
    $timeout.cancel(timer);
    timerFunction();
  });
  var timer;
  var timerFunction = function() {
    timer = $timeout(function() {
      $scope.nothingEnteredFlag = true;
    }, 5000);
  };
  timerFunction();
});

如您所见，一旦用户输入任何文本，我们就启用了5秒钟的超时，我们取消了计时器并再次启用它，这样我们可以提示用户输入是否在5秒钟内没有写任何内容。 / p>

Demo

设置AngularJS $ watch函数的超时

1 个答案: