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

前言

对于一个在前端属于纯新手的我来说，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

总结

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

赞 (0)

相关推荐

  • Angular项目中$scope.$apply()方法的使用详解

    前言 相信大家在一开始用angular做项目的时候,一定碰到过$scope.$apply()方法,表面上看,这像是一个帮助你进行数据更新的方法,那么,它为何存在,我们又该如何使用它呢.下面话不多说,来一起看看详细的介绍吧. JavaScript执行顺序 JavaScript单线程操作,代码按照代码片段的顺序来之行,每个代码块从运行到结束都不会被打断,这也是为什么会发生浏览器阻塞的情况,往往是有一部分在运行,而导致其他所有的代码段冻结. 每当有耗费时间较多的任务出现,例如等待一个click事件,等

  • angular4强制刷新视图的方法

    使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图. 这里使用NGZone来更新视图 import {NgZone} from '@angular/core'; constructor(private zone: NgZone) { this.zone.run(() => { // 要更新视图的代码 }) } 以上这篇angular4强制刷新视图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大

  • angularJS中$apply()方法详解

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

  • AngularJS中$apply方法和$watch方法用法总结

    本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

  • 对angular 实时更新模板视图的方法$apply详解

    有的时候在回调里面写了更新scope的里面的内容,视图上面竟然没有同时更新,这就用到了$apply Scope的特性 接下来,看看Scope有哪些特性呢? Scope提供$watch方法监视Model的变化. Scope提供$apply方法传播Model的变化. Scope可以继承,用来隔离不同的application components和属性访问权限. Scope为Expressions的计算提供上下文. 最简单的使用方法,就是在需要传递变化的地方写上以下代码 $scope.$apply()

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

    前言 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. 今天,我们要聊得是Angularjs中的小明星$apply.当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现.噢,真的更新了. 然而,有些时候,编译器会无情的给你返回 Error: $d

  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

  • 对angularJs中自定义指令replace的属性详解

    如下所示: <div ng-app="module"> <div my-exam></div> </div> <script> var m = angular.module('module', []); m.directive('myExam', [function () { return { restrict: 'EA', template: '<h1>欢迎浏览泠泠在路上</h1>', /*1.rep

  • javascript中call,apply,bind的区别详解

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. 那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " ,

  • AngularJS中如何使用echart插件示例详解

    AngularJS中如何使用echart插件示例详解

    第一步:准备 首先我们要做的是在我们的项目中引入我们所需要的依赖,假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令 1. cnpm install angular --save 2. cnpm install echarts --save 在安装完毕后你将会得到一个命名为node_modules的文件夹,而我们需要的东西都在里面,当一切准备完毕后我们就可以开始我们的开发了. 第二步:开发 我认为在angular中使用其他插件的最好方法是使用指令的形

  • AngularJS 中ui-view传参的实例详解

    Angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" c

  • JavaScript中的apply和call函数详解

    第一次翻译技术文章,见笑了! 翻译原文: Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下 这篇文章 ,复习一下(refresher)JavaScript特性.你可能还想知道JavaScrip

  • javascript中call apply 与 bind方法详解

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,本文将通过几个场景的应用,来详细理解三个方法. call() call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 当调用一个函数时,可以赋值一个不同的 this 对象.this 引用当前对象,即 call 方法的第一个参数. 通过 call 方法,你可以在一个对象上借用另一个对象上的方法,比如Object.prototype.toString.call([]),

  • Linux中对MySQL优化实例详解

    Linux中对MySQL优化实例详解 vim /etc/my.cnf以下只列出my.cnf文件中[mysqld]段落中的内容,其他段落内容对MySQL运行性能影响甚微,因而姑且忽略. [mysqld] port = 3306 serverid = 1 socket = /tmp/mysql.sock skip-locking 避免MySQL的外部锁定,减少出错几率增强稳定性. skip-name-resolve 禁止MySQL对外部连接进行DNS解析,使用这一选项可以消除MySQL进行DNS解析

随机推荐