如何在Angular JS中自定义$ watch？

Question

我想要一个自定义的$watch 。 我会在一个变量上做这只手表。 我想当一个变量的值被更改以查看一条消息，而当该变量不改变其值以查看另一条消息时。

下一个示例是：我有一个文本框，当用户写东西时可以在其中观看。 我想在他写东西时停下来查看另一条消息时看到一条消息。

Answer 1

您可以检查超时：

$scope.$watch("myVar",
              function handleMyVarChange( newValue, oldValue ) {
                 //Change Display Message to Editing Message

                 //Timeout to checkif stop writing
                 $timeout(function (newValue) {
                 if(newValue === myVar) {
                   //Change Display Message to Not Editing Message
                }
               }, 100);
             }
);

Answer 2

我建议的概念在许多JavaScript库中都称为debounce 。 您提供了要调用的函数，并且指定了必须经过的时间长度，才能在触发回调之前再次调用该函数。 通常，您还可以提供在初始调用时触发回调的选项。 这将允许您在第一个调用上翻转一个开关，然后在经过一定时间后又将其翻转回去而无需再次调用该函数。

请参阅： http ： //davidwalsh.name/javascript-debounce-function

例如：

（一个更好的例子是使用$timeout创建一个debounce服务，消除了对$scope.$evalAsync() ）

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  var toggle = debounce(function() {
    $scope.typing = !$scope.typing;
    $scope.$evalAsync();
  }, 500, true)

  $scope.$watch('name', toggle)
});

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this;
    var args    = arguments;
    var callNow = immediate && !timeout;

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    if (callNow){
      func.apply(context, args);
    }

    function later() {
      timeout = null;
      func.apply(context, args);
    }
  };
}