Angularjs中的$apply及优化使用详解


Posted in Javascript onJuly 02, 2018

前言

对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少。不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题。

今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢,真的更新了。

然而,有些时候,编译器会无情的给你返回

Error: $digest already in progress

那么,导致这些现象的原因时什么的呢?$apply究竟干了啥?听我慢慢到来。

一.$apply的作用

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

上面是AngularJs权威教程中的一句话。什么意思呢?

首先,你要清楚,在原生js或者第三方框架下,修改model,是有可能不会触发视图更新的,比如setTimeout、jquery插件。为什么?因为他们脱离了Angularjs的上下文,Angularjs并不能监听到数据的改变。看例子。

1.setTimeout

html:

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

js:

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

首先,name等于张三,500ms后,我把他赋值为李四,但是,页面上并没有改变,依然是张三。

而,我们把$scope.$apply()放开,就正常了,张三成功变为李四。

2.第三方插件

html:

<p>Date: <input type="text" id="datepicker"></p>
<p>
<header>所选日期</header>
{{selectedDate}}
</p>

js:

$scope.selectedDate = '';
$( function() {
 $( "#datepicker" ).datepicker({
 onClose: function( selectedDate ) {
 $scope.selectedDate = selectedDate;
 // $scope.$apply();
 }
 });
} );

这是jquery的datepicker插件,当我们选定日期后,下面的日期应该随之显现,而现在却没有。这种情况就必须依靠$apply(),才能更新视图。

以上两种情况,都因为不处于Angularjs上下文中,导致监听不到数据的变化。而$apply究竟干了什么,才导致数据更新正常了呢?

其实$apply相当于一个触发器,它的作用就是触发digest循环,从而更新视图。

在digest是Angularjs的核心,是它实现了神奇的数据绑定。凡是触发事件,必会触发digest循环,比如,我们数值的ng事件,click啊,change,实际上都是触发了digest循环。

所以,我们所做的事,其实就是手动触发了digest循环。关于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中还藏着许多奥秘,和更好的使用方法,希望大家可以深入地研究,分享出更好的文章。

下面是可执行的代码,大家可以探究探究:https://codepen.io/hanwolfxue/pen/yEZbYQ

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
angular2使用简单介绍
Mar 01 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
angularjs 的数据绑定实现原理
Jul 02 #Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 #Javascript
vue中的数据绑定原理的实现
Jul 02 #Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 #Javascript
jsonp跨域获取数据的基础教程
Jul 01 #Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 #Javascript
关于Vue组件库开发详析
Jul 01 #Javascript
You might like
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP7多线程搭建教程
2017/04/21 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python程序慢的重要原因
2020/09/04 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
六查六看六改心得体会
2014/10/14 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
公司借条范本
2015/05/25 职场文书
离职信范文
2015/06/23 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers