【AngularJS】释放多余的$watch检测函数

来源：互联网发布：windows更新安装失败编辑：程序博客网时间：2024/05/31 19:33

我们知道，在Angular中，数据的双向绑定是它非常强大的功能，也是它区别于其他前端框架的特征之一，而这个功能的实现离不开$watch函数。

如果在移动端设备中，众多的数据双向绑定必然诞生大量的$watch函数执行，这些$watch函数的执行会导致页面数据加载缓慢、元素绑定方法执行效率过低等性能问题。

因此，当不需要时，必须及时释放多余的$watch检测函数。

在Angular中，当$watch函数被直接调用时，将返回一个释放$watch绑定的unbind函数。因此，根据这个特征，当需要释放某个多余的$watch监测函数时，只需要再次调用这个$watch函数就可以轻松地释放它的监测功能。

<!DOCTYPE html>  <html ng-app="myApp">  <head>  <meta charset="UTF-8">  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>  <style>  .frame{    padding: 5px 8px;    margin: 0px;    font-size: 12px;    width: 320px;    background-color: #eee;  }  .frame button, .frame div{    margin: 5px 0px;  }</style> </head>  <body>    <div ng-controller="myCtrl" class="frame">    <input type="text" ng-model="content">    <div>第 {{num}} 次数据变化</div>    <button ng-click="stopWatch()">停止检测</button>  </div>  <script>    angular.module('myApp', [])      .controller('myCtrl', function($scope){        $scope.num = 0;        $scope.stopWatch = function(){          contentWatch();        }        var contentWatch = $scope.$watch('content', function(newVal, oldVal){          if(newVal === oldVal){            return;          }          $scope.num++;        })      })  </script></body>  </html>

需要说明的是，当页面加载完成时，$watch函数将会被首次执行。为了使首次监测时不进行累计数，根据首次执行函数newValue和oldValue的值都为“undefined”的特征，即两者此时拥有相同的值，如果相同，则调用return语句，退出累计数。

当单击“停止监测”按钮时，将会调用stopWatch方法，在这个方法中，调用contentWatch方法，而这个方法对应的就是$watch函数的返回值，即返回一个释放$watch绑定的unbind函数，最终实现停止监测的效果。

0 0