当前位置:首页 > Web开发 > 正文

这就大大消耗了性能

2024-03-31 Web开发

搬运自:https://www.cnblogs.com/yky-iris/p/9251230.html?utm_source=debugrun&utm_medium=referral

视图不更新问题及原因: 在原生js或者第三方框架下,改削model,是有可能不会触发视图更新的,好比setTimeout、jquery插件。因为他们脱离了Angularjs的上下文,Angularjs并不能监听到数据的转变。

解决要领:操作$apply()手动更新视图,如下。

html:

<p>{{name}}</p>

js:

$scope.name="张三"; setTimeout(function(){ $scope.name = ‘李四‘; //$scope.$apply() },500)

  一. $apply(),digest观点  

  $apply()函数的感化: 可以从Angular框架的外部让表达式在Angular上下文内部执行。

  $apply()函数事情道理:相当于一个触发器,它的感化就是触发digest循环,从而更新视图。

  digest是什么?:digest是Angularjs的核心,是它实现了神奇的数据绑定。通常触发事件,必会触发digest循环,好比ng事件,click,change,实际上都是触发了digest循环。

  二. 更好的运用digest   

  在Angularjs中,除了$apply可以触发digest循环外,还有其他的要领,也可以触发此循环。而且$apply往往是最坏的选择。下面保举一些更好的选择。

(1). $digest

$scope.$digest()的速度要比$apply要快,因为它只更新当前感化域和子感化域的值,对付父感化域时不管的。而$apply还要评估父感化域,这就大大消耗了性能。

(2). $timeout

用$timeout去取代你的setTimeout,$timeout作为Angularjs的自带处事,,固然时更契合Angularjs环境啦。它会隐性触发digest循环,而且它会延迟执行,会在上一个digest循环完成后的下一刻,触发digest循环,这样就不会呈现上文所说的   

$digest already in progress

我们把setTime的代码放到$timeout中

$timeout(function(){   $scope.name = ‘李四‘; },500)

这就能正常事情了,看,没有讨厌的apply了!

(3). $evalAsync

最保举的应该时这个要领了。如果当前正好有一个digest循环在执行,那么它就会把导致digest循环的操纵,放到当前digest循环中去执行。而$timeout是要等到当前digest循环执行完,再执行一次digest循环才可以。所以evalAsync执行更快,性能更好。我们可以像$timeout那样去挪用它,即

$scope.$evalAsync( function( $scope ) { console.log( "$evalAsync" ); } );

angularJS——数据更新了但是view层却未更新问题及解决要领

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31221.html