首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么Angular会在一个实例而不是另一个实例中自动调用setTimeout?

Angular会在一个实例而不是另一个实例中自动调用setTimeout的原因是因为Angular使用了变化检测机制来监测数据的变化并更新视图。在Angular中,每个组件都有一个变化检测器,它负责监测组件的属性是否发生了变化。

当一个组件的属性发生变化时,Angular会自动触发变化检测机制,并在下一个变化检测周期中更新视图。为了提高性能,Angular使用了一种称为"脏检查"的机制,它会在每个变化检测周期中遍历所有组件的属性,检查是否有变化。

setTimeout是JavaScript中的一个函数,它可以在指定的时间间隔后执行一段代码。在Angular中,当我们在一个组件中调用setTimeout时,这段代码会在下一个变化检测周期中执行。这是因为Angular希望在变化检测周期中执行所有的变化检测操作,以确保视图的一致性。

另一方面,如果我们在另一个实例中调用setTimeout,这段代码不会在下一个变化检测周期中执行。这是因为Angular只会在当前组件所属的变化检测周期中执行变化检测操作。如果我们希望在另一个实例中调用setTimeout并触发变化检测,我们可以手动调用Angular的变化检测机制,例如使用ChangeDetectorRef的detectChanges方法。

总结起来,Angular会在一个实例而不是另一个实例中自动调用setTimeout是因为Angular使用了变化检测机制来监测数据的变化并更新视图,而setTimeout中的代码会在下一个变化检测周期中执行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

假设你在一个ng-click指令对应的handler函数更改了scope的一条数据,此时AngularJS会自动地通过调用$digest()来触发一轮$digest循环。...典型的需要调用 $apply() 方法的场景是: 1) 使用了 JavaScript setTimeout() 来更新一个 scope model 2) 用指令设置一个 DOM 事件 listener...不过,在 AngularJS 应该尽量使用 $timeout Service 来代替 setTimeout(),因为前者会帮你调用 $apply(),让你不需要手动地调用它。...angular 无法保证你绝对不会在一个 controller 里更改另一个 controller 生成的 scope,包括 自定义指令(Directive)生成的 scope 和 Angular 1.5...从底层实现上来看,service 调用了 factory,返回其实例;factory 调用了 provider,将其定义的内容放在 $get 返回。

7.8K40

Angular ElementRef 简介

沉思… ,不是setTimeout 么,我们在稍微改造一下: constructor(private elementRef: ElementRef) { setTimeout(() => {...为什么添加个 setTimeout 就能成功获取到想要的 div 元素呢?此处就不展开了,有兴趣的读者可以参考 - [What the heck is the event loop anyway?]...问题解决了,但感觉不是很优雅 ?有没有更好的方案,答案是肯定的。Angular 不是有提供组件生命周期的钩子,我们可以选择一个合适的时机,然后获取我们想要的 div 元素。...class AppComponent { name: string = 'Semlinker'; // 在构造函数 this.elementRef = elementRef 是可选的,编译时会自动赋值...我们直接选用 ngAfterViewInit 这个钩子,不要问我为什么,因为它看得最顺眼咯。不过我们后面也会有专门的文章,详细分析一下 Angular 组件的生命周期。

1.6K60

2023秋招前端面试必会的面试题_2023-02-23

对闭包的理解闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,创建的函数可以访问到当前函数的局部变量。...如果 JS 是门多线程的语言话,我们在多个线程处理 DOM 就可能会发生问题(一个线程中新加节点,另一个线程删除节点),当然可以引入读写锁解决这个问题。...这是因为 HTML5 标准规定这个函数第二个参数不得小于 4 毫秒,不足会自动增加。所以 setTimeout 还是会在 script end 之后打印。...,需要注意Child.prototype指向的是Parent的实例parent,不是指向Parent这个类。...child2.show(),这个也没啥好说的;parent.show(),parent是一个Parent类的实例,Child.prorotype指向的是Parent类的另一个实例,两者在堆内存互不影响

45320

【Hybrid开发高级系列】AngularJS(二)——常用$服务

rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 injector。...$apply()方法可以在angular框架之外执行angular JS的表达式,例如:DOM事件、setTimeout、XHR或其他第三方的库。...$httpProvider 中有一个 interceptors 数组,所谓拦截器只是一个简单的注册到了该数组的常规服务工厂。         ...我们可以利用路由服务定义这样一种东西:对于浏览器所指向的特定URL,Angular将会加载并显示一个模板,并实例一个控制器来为模板提供内容。         ...replace( ):如果被调用,就会用改变后的URL直接替换浏览器的历史记录,不是在历史记录中新建一条信息,这样可以阻止『后退』。

37940

开发人员面临的10个最常见的JavaScript问题

如果你猜测console.log()的调用会输出 undefined 或者抛出一个错误,那你就猜错了。答案是输出10。为什么呢?...但是一旦一个变量被任何闭包使用,它就会在该作用域内所有闭包共享的词法环境结束。而这个小小的细微差别正是导致这个可怕的内存泄露的原因。...==(不是==和!=),以避免强制类型转换的带来非预期的副作用。(== 和 != 会自动进行类型转换, === 和 !...结果,this的值是 window,不是 MyObject 的 obj 实例! 因此,如果我们真的需要为一个对象的现有方法创建一个引用,我们需要确保在该对象的名字空间内进行,以保留 this值。...或 setInterval 提供一个字符串作为第一个参数 首先,需要知道的是为 setTimeout 或 setInterval 提供一个字符串作为第一个参数,这本身并不是一个错误。

80310

Angular进阶教程2-

依赖注入与HTTP的介绍 为什么使用服务?...依赖注入(DI) 依赖项( 服务/对象 )注入是一种设计模式,在这种设计模式,类会从外部源请求依赖项\color{#0abb3c}{请求依赖项}请求依赖项不是创建它们。...Angular 的 DI 框架会在实例化\color{#0abb3c}{实例化}实例化某个类时为其提供依赖,从而提高模块性和灵活性。...Provider配置多个标识,他们对应的对象指向同一个实例,从而实现多个依赖、一个对象实例的作用 useFactory: 动态生成依赖对象 Http的介绍 大多数前端应用都要通过 HTTP...operators的本质是,描述从一个数据流到另一个数据流之间的关系,也就是observer到observable中间发生的转换,很类似于Lodash。

4.1K30

AngularJS 1 教程

---- JS Bin on jsbin.com 同样的一个简单需求,可以明显看得出jQuery业务代码,直接操作DOM代码揉杂在一块,AngularJS代码关心业务逻辑,HTML描述界面非常的清晰...$interpolateProvider.endSymbol('%)'); }) ng-model就是 AngularJS 1的一大特色: 数据双向绑定 ,model数据变化了view中就会自动改变...,相应的view(表单)变化了,也会自动同步到model。...从使用角度来说脏检查 ---- JS Bin on jsbin.com 上面Demo timeout的例子,通过原生setTimeout方法修改的变量,并没有更新到视图上,1000毫秒setTimeout...1000毫秒setTimeout的能够更新是因为,这个时间点,恰好由timeout方法触发了一次检查。因此这也就导致了从另一个角度分析脏检查。

4.6K30

Change Detection And Batch Update

如果仔细观察的话,你会发现上面的输出符合一个规律:在React调用的方法连续setState走的是批量更新,此外走的是连续更新。...到此我们可以得出这样一个结论: 在React调用的方法连续setState走的是批量更新,此外走的是连续更新 说到这里,有些人可能会有这样一个疑惑 handleClick() { setTimeout...setTimeout确实是在handleClick当中调用的,但是两个setState可不是在handleClick当中调用的,它们是在传递给setTimeout的参数——匿名函数执行的,走的是事件轮询...,所以Angular1没法自动帮我们调用$apply,这里我们只能手动调用$apply进行脏值检测了 $('#btn').on('click', function() { $scope.val =...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。

3.3K40

Change Detection And Batch Update

如果仔细观察的话,你会发现上面的输出符合一个规律:在React调用的方法连续setState走的是批量更新,此外走的是连续更新。...到此我们可以得出这样一个结论: 在React调用的方法连续setState走的是批量更新,此外走的是连续更新 说到这里,有些人可能会有这样一个疑惑 handleClick() { setTimeout...setTimeout确实是在handleClick当中调用的,但是两个setState可不是在handleClick当中调用的,它们是在传递给setTimeout的参数——匿名函数执行的,走的是事件轮询...,所以Angular1没法自动帮我们调用$apply,这里我们只能手动调用$apply进行脏值检测了 $('#btn').on('click', function() { $scope.val =...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。

3.7K70

Angular Route 中提前获取数据

通过本文,你将学会使用 resolver, 在 Angular App 应用 resolver,应用到一个公共的预加载导航。...\n\n通常,我们都会在组件的 ngOnInit() 钩子函数获取数据。也就是说,组件加载完之后,我们发起数据请求。...你可以只添加一个适用于每个路由的 loader,不是每个路由中都添加 loader。\n\n本文将结合示例来解析 resolver 的知识点。以便于你可以牢记它并在项目中使用它。...resolver 接口中有一个 resolve() 方法,它有两个参数:route(ActivatedRouteSnapshot 的实例)和 state(RouterStateSnapshot 的实例)...\n\n接着,创建一个服务来获取 JSONPlaceholder 列表数据。然后在 resolver 调用,接着在路由中配置 resolve信息,(页面将会等待)直到 resolver 被处理。

6.2K30

实战 | Change Detection And Batch Update

到此我们可以得出这样一个结论: 在React调用的方法连续setState走的是批量更新,此外走的是连续更新 说到这里,有些人可能会有这样一个疑惑: setTimeout也是在handleClick...setTimeout确实是在handleClick当中调用的,但是两个setState可不是在handleClick当中调用的,它们是在传递给setTimeout的参数——匿名函数执行的,走的是事件轮询...因为我们没有用Angular1提供的事件系统,所以Angular1没法自动帮我们调用$apply,这里我们只能手动调用$apply进行脏值检测了。...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。...Angular2更新机制大体如下: ngZone是对Zone.js的服务封装,Angular2会在每个task执行结束后触发更新。

3.2K20

Angular2 之 单元测试

组件的测试 单独的service测试 Angular的测试工具 Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,...detectChanges:在测试Angular变化检测。 每个测试程序都通过调用fixture.detectChanges() 来通知Angular执行变化检测。...伪造服务实例 被测试的组件不一定要注入真正的服务。实际上,服务的复制品(stubs, fakes, spies或者mocks)通常会更加合适。 spec的主要目的是测试组件,不是服务。...---- 多次调用一个异步方法 相信大家对这段单元测试的代码很熟悉,这里就是模拟多次调用一个方法时,返回不同的值。 这里是同步方法的模拟返回数据,那么异步方法同样可以。...这个错误,我意识到了,所以我再第二次调用的地方添加了一个延时执行的函数,这样单元测试是完全正确的,但是这并不是一个好的解决办法。

5.5K20

AngularDart4.0 指南- 依赖注入 顶

本页面涵盖了DI是什么,为什么它是有用的,以及如何使用Angular DI。 运行实例(查看源代码)。 为什么使用依赖注入? 要理解为什么依赖注入如此重要,请考虑没有它的例子。...Car构造函数并不要求它们,而是从特定的Engine类和Tires类实例化自己的副本。 如果Engine类发展它的构造函数需要一个参数呢?...在测试环境甚至可以创建一个新的Engine? Engine是依赖于什么的? 这个依赖依赖于什么? 引擎的新实例是否会对服务器进行异步调用? 你当然不希望在测试过程中发生这种情况。...注册一个服务提供商 一个服务只是Angular一个类,直到您使用Angular依赖注入器注册它。 一个Angular注入器负责创建服务实例并将它们注入类如HeroListComponent。...,不是要求注射器从一个类创建它更容易。

5.6K20

angular5面试题_大数据面试题

而且是用同一个service实例(Singleton),也就是说一个service里的数据是共分享的,可以用于组件间数据传递。...对于setTimeout,addEventListener、promise等都在ngZone执行(换句话说,就是被zone.js封装重写了),angular并在ngZonesetup了相应的钩子,通知...可以采用如下方式避免 对于只用于展示的数据,使用单向绑定,不是双向绑定; Angular的数据流是自顶下,从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。...每个Angular应用程序只能有一个根模块(Root Module),它可以有一个或多个功能模块(Feature Module)。...Promise,无论是否调用then。promise都会立即执行;observables只是被创建,当调用(subscribe)的时候才会被执行。

4.3K20

AngularDart4.0 英雄之旅-教程-06服务 顶

然而,定义英雄不是组件的工作,你不能轻易与其他组件和视图共享英雄名单。 在这个页面,您将把英雄数据采集业务转移到一个提供数据的服务,并与需要数据的所有组件共享该服务。...注入HeroService 不是使用新的表达式,添加这些行: 添加一个私人的HeroService属性。 添加一个初始化私有属性的构造函数。 将HeroService添加到组件的提供程序元数据。...每个接口都有一个方法。 当组件实现该方法时,Angular会在适当的时候调用它。 在“Lifecycle Hooks”页面详细了解生命周期挂钩。...将OnInit添加到由AppComponent实现的接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确的时间调用它。...有关异步函数的更多信息,请参阅在Dart语言浏览声明异步函数。 处理Future 由于对HeroService的更改,应用程序组件的英雄属性现在是Future,不是英雄列表。

2.9K10
领券