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

最新推荐文章于 2024-06-24 08:43:17 发布

abloume

最新推荐文章于 2024-06-24 08:43:17 发布

阅读量3.1k

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/u013451157/article/details/60865962

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我们知道，在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函数，最终实现停止监测的效果。

abloume

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【AngularJS】释放多余的$watch检测函数

我们知道，在Angular中，数据的双向绑定是它非常强大的功能，也是它区别于其他前端框架的特征之一，而这个功能的实现离不开$watch函数。如果在移动端设备中，众多的数据双向绑定必然诞生大量的$watch函数执行，这些$watch函数的执行会导致页面数据加载缓慢、元素绑定方法执行效率过低等性能问题。因此，当不需要时，必须及时释放多余的$watch检测函数。
复制链接

扫一扫

专栏目录