AngularJS：清除 $watch

Posted 2023-02-22

【中文标题】AngularJS：清除 $watch

【英文标题】：AngularJS : Clear $watch

【发布时间】：2013-02-04 03:23:59

【问题描述】：

我的 AngularJS 应用程序中有一个监视功能。

$scope.$watch('quartzCrystal', function () 
   ...

但是，在某些情况下（在我的示例中，更改我的single-page application 的页面）我想停止那个手表（就像清除超时一样）。

我该怎么做？

【参考方案1】：

$watch 返回一个注销函数。调用它会注销$watcher。

var listener = $scope.$watch("quartz", function () );
// ...
listener(); // Would clear the watch

【讨论】：

您知道在控制器生命周期结束时（例如在$on('$destroy') 上）取消注册所有侦听器是否是一种好习惯，还是 AngularJS 会处理它们？谢谢！

作用域被销毁时，所有的观察者都会被移除，你不需要管理那些

你可以在这里看到一个有趣的讨论来解释这个问题：github.com/angular/angular.js/issues/4574 基本上，如果你为 $rootScope 分配一个监听器，你必须自己取消分配它，否则它将持续到 $scope变化。 $scope 上的观察者会被 $scope 销毁（$scope 不是 Angular 中的单例，它们会在需要时创建和销毁）。

但是，如果我只希望观察者检查值是否存在，然后当它存在时做一些更改，然后注销自己我已经尝试过 - var listen = $scope.$watch(' mvIdentity.currentUser', function(currentUser) test = 1; console.log("--> " + $scope.updateemail + " -- " + test); listen(); );

@UmurKontacı 实际上，deadman 的评论是完全有效的，因为您的原始评论并非适用于所有情况。

【参考方案2】：

scope.$watch 返回一个您可以调用的函数，该函数将取消注册手表。

类似：

var unbindWatch = $scope.$watch("myvariable", function() 
    //...
);

setTimeout(function() 
    unbindWatch();
, 1000);

【讨论】：

是的，您可以在 watchFn 中解除绑定！简单用例：您只想观看并执行一次 watchFn，然后停止观看。

我调用unbind函数后是否可以重新绑定手表，就像再次调用它一样？

这很有用。在我的测试中，超时执行 unbindWatch 似乎很重要。

在这种情况下你应该使用$timeout，你也可以取消注册！

最好避免超时

【参考方案3】：

如果你想在事情发生后立即清除它，你也可以在回调中清除手表。这样，您的 $watch 将在使用前保持活动状态。

就这样……

var clearWatch = $scope.$watch('quartzCrystal', function( crystal )
  if( isQuartz( crystal ))
    // do something special and then stop watching!
    clearWatch();
  else
    // maybe do something special but keep watching!
   

【参考方案4】：

有时您的 $watch 正在调用 dynamically 并且它会创建它的实例，因此您必须在您的 $watch 函数之前调用注销函数

if(myWatchFun)
  myWatchFun(); // it will destroy your previous $watch if any exist
myWatchFun = $scope.$watch("abc", function () );

【参考方案5】：

理想情况下，当您离开作用域时，应该移除每个自定义手表。

它有助于更​​好的内存管理和更好的应用性能。

// call to $watch will return a de-register function
var listener = $scope.$watch(someVariableToWatch, function(....));

$scope.$on('$destroy', function() 
    listener(); // call the de-register function on scope destroy
);

【参考方案6】：

如果观察者过多，需要清除所有观察者，可以将它们推入一个数组并循环销毁每个$watch。

var watchers = [];
watchers.push( $scope.$watch('watch-xxx', function(newVal)
   //do something
));    

for(var i = 0; i < watchers.length; ++i)
    if(typeof watchers[i] === 'function')
        watchers[i]();
    


watchers = [];