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

为什么对于setInterval(),ngOnInit()要执行多次?

对于setInterval()和ngOnInit()的执行次数,可以从以下几个方面进行解释:

  1. setInterval()函数:setInterval()是JavaScript中的一个定时器函数,用于按照指定的时间间隔重复执行指定的代码。它接受两个参数,第一个参数是要执行的代码,第二个参数是时间间隔(以毫秒为单位)。setInterval()会在每个时间间隔过后重复执行代码,直到被清除。
  2. ngOnInit()生命周期钩子:ngOnInit()是Angular框架中的一个生命周期钩子函数,用于在组件初始化完成后执行一些初始化操作。它在组件的构造函数执行完毕后被调用,通常用于初始化组件的属性、订阅数据流等操作。

现在来解释为什么对于setInterval(),ngOnInit()要执行多次:

  1. 组件初始化:当一个组件被创建并加载到DOM中时,Angular会调用组件的构造函数和ngOnInit()函数。因此,ngOnInit()函数会在组件初始化时执行一次。
  2. 变更检测:Angular框架使用变更检测机制来追踪组件属性的变化,并在需要时更新DOM。当组件的属性发生变化时,Angular会重新运行变更检测机制,这可能会导致ngOnInit()函数被再次调用。
  3. 定时器执行:如果在ngOnInit()函数中使用了setInterval()函数创建了一个定时器,那么每当定时器的时间间隔到达时,定时器中的代码会被执行。这也会导致ngOnInit()函数被多次调用。

综上所述,ngOnInit()函数会在组件初始化时执行一次,并且在组件属性变化或定时器执行时可能会被多次调用。这是因为Angular框架的机制和setInterval()函数的特性所导致的。

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

相关·内容

为什么执行 alter 更新表慎重?

大家想想这样一个场景:当我们通过 alter 语句更新一张表的时候,同时又针对这张表执行了查询语句,假设两者同时执行,那么将来查询到的结果可能就并不是我们想要的结果,也就是数据一致性出了问题。...其实 MDL 加锁过程是系统自动控制,无法直接干预,也不需要直接干预,当我们对一个表做增删改查操作的时候,会自动加 MDL 读锁;当我们更新表结构的时候,加 MDL 写锁。...接下来我们开启一个新的会话,执行一个 alter 语句: 大家看到,在新的会话中执行 alter,就会卡住。...接下来执行开启另外一个会话,执行一条更新 SQL: 发现更新 SQL 竟然成功执行了,没有发生阻塞!!!这是怎么回事呢?...假设一个有一个 SQL 事务,类似下面这样: begin; A-SQL alter B-SQL 对于上面这个 SQL 而言,执行 alter 的时候,就会提交 A-SQL 所在的事务,执行 B-SQL

73020

为什么谷歌执行严格的代码编写规范

反对编码规范的人很多,下面是一些常见的理由,对于这些理由,我以前是深信不疑。 这是浪费时间! 我是一个优秀的程序员,我不愿意浪费时间干这些愚蠢的事。我的技术很好,我可以写出清晰的、易于理解的代码。...为什么浪费时间遵守这些愚蠢的规范?答案是:统一是有价值的。...我们程序员对于自己的编码风格通常怀有很高的自负。我写出的的代码的确能反映出我的一些特质,它是我思考的一种体现。它是我的技能和创造力的印证。如果你强迫我遵守什么愚蠢的规范,这是在打压我的创造力。...不错,对于你的项目,你并没有从中获得该有的好处,但对于一个大型公司来说,它带来的好处是巨大的。除此之外,专门针对某个项目制定编码规范一般效果会更好。一个项目拥有自己的编码风格无可厚非。...对于此,客气点说,就是胡扯。纯属傲慢自大,荒唐可笑。事实上他们的意思就是,没有人配得上给他们制定规范,对他们的代码的任何改动都是一种破坏。

98070
  • 详解ANGULAR2组件中的变化检测机制(对比ANGULAR1的脏检测)

    这也是为什么新的变化检测是快速的 (相比于 Angular 1.x 的 $digest)。基本上,每个组件可以在几毫秒内执行数万次检测。因此你的应用程序可以快速执行,而无需调整性能。...另外对于单次变化检测,每个组件只检查一次。 OnChanges 当组件的任何输入属性发生变化的时候,我们可以通过组件生命周期提供的钩子 ngOnChanges来捕获变化的内容。...() { setInterval(() => { this.counter++; this.cdRef.markForCheck();...我们看到在 ngOnInit 钩子中,我们通过 setInterval 定时器,每隔一秒钟更新计数值同时调用 ChangeDetectorRef 对象上的 markForCheck() 方法,来标识该组件在下一个变化检测周期...() { setInterval(() => { this.counter++; }, 1000); } detachCD(checked

    2.9K90

    AngularDart 4.0 高级-生命周期钩子 顶

    OnInit 使用ngOnInit有两个主要原因: 在施工后不久执行复杂的初始化 在Angular设置输入属性后设置组件 有经验的开发人员同意组件应该便于构建且安全。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数中获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...当ngOninit运行时,它们将被设置。 ngOnChanges方法是您第一次访问这些属性的机会。 在ngOnInit之前Angular会调用ngOnChanges ...并在此之后多次调用。...当英雄或权力没有实质性变化时,它会向日志中写入特殊消息,以便您可以看到DoCheck被多次调用。 结果是高亮的: ?...view ends -- {{comment}}''', 以下钩子根据更改子视图内的值来执行操作

    6.2K10

    Angular 的生命周期

    angular 中,生命周期执行的顺序如下: - constructor 【常用,不算钩子函数,但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck...ngOnChanges 当我们有外部参数更改的时候,我们就会执行 ngOnChanges,也就是说组件中有 @Input 所绑定的属性值发生改变的时候调用。...简单说,父组件绑定子组件中的元素,会触发这个钩子函数,可以多次出发。这在下面的 ngOnInit 总会介绍。 ngOnInit 这个方法调用的时候,说明组件已经初始化成功。...当 @Input 传递的属性发生改变的时候,可以多次触发 demo 组件中的 ngOnChanges 钩子函数。 <!...这个钩子函数,紧跟在每次执行变更检测时候 ngOnChanges 和首次执行执行变更检测时 ngOnInit 后面调用。

    90020

    Angular 从入坑到挖坑 - 组件食用指南

    :模板表达式得出的数据应该快速结束,否则就会对于用户体验造成影响 没有可见的副作用:模板表达式只作为数据的展示,不应该改变任何的数据;应该构建出幂等的表达式,除非依赖的值发生变化,否则多次调用时,应该返回相同的数据信息...(): void { } getRefMes(msg: string) { this.refMsg = msg; } } 模板引用变量的作用域是整个模板,因此确保一个模板中的引用变量名称是唯一的...与销毁元素不同,对于隐藏的元素来说,所有的元素监听事件还会执行监听的,再次显示时不用重新进行初始化过程 NgFor:通过定义单条数据的显示格式,angular 以此为模板,循环渲染出所有的数据...;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来在构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用 ngAfterContentInit...ngOnDestroy 只在销毁组件时调用一次,一般用来在组件销毁前执行某些操作 在组件加载过程中,会按照上面列出的钩子函数顺序,在组件的构造函数执行之后依次执行,在页面加载过程中会涉及绑定数据的操作

    15.8K30

    JavaScript各种定时器总结

    这个时候有人会说为什么不用socket呢?原因有很多,一部分原因是以前项目就是这样,另一方面,可能服务器对于一个用户支付开启一个socket对于服务器的性能是有负担的,所以不去开启。...我们分别说一说setTimeout和setInterval的原理以及区别 setTimeout setInterval setTimeout和setInterval执行原理其实差不多,关键是在于两个定时器对于回调函数的执行时机的问题...但是setInterval就完全不一样了,定时时间是规定多久将回调函数推进任务队列中,然后每一次执行任务队列的时候都执行定时器的回调任务。 为什么不要使用setInterval?...很简单的一例子,如果使用setInterval,里面的回调函数中,需要执行比较长的事件,例如setInterval一个1秒钟的时间,然后callback中需要执行3秒,那么下一个setInterval并不会等待上一个的...setInterval的callback执行完毕才执行,这样就有可能出现同一时间触发多次setInterval的callback,然后导致页面的奇怪现象。

    64020

    从根上理解 React Hooks 的闭包陷阱

    我们跑一下: 打印的并不是我们预期的 0、1、2、3,而是 0、0、0、0,这是为什么呢? 这就是所谓的闭包陷阱。...我们知道了为什么执行一次,那只执行一次有什么问题呢?定时器确实只需要设置一次呀?...定时器确实只需要设置一次没错,但是在定时器里用到了会变化的 state,这就有问题了: deps 设置了空数组,那多次 render,只有第一次会执行传入的函数: 但是 state 是变化的呀,执行的那个函数却一直引用着最开始的...闭包陷阱的解决也很简单,正确设置 deps 数组就可以了,这样每次用到的 state 变了就会执行新函数,引用新的 state。不过还要注意清理下上次的定时器、事件监听器等。...理清 hooks 闭包陷阱的原因是理解 hook 的原理的,什么时候会执行新传入的函数,什么时候不会。

    2.7K43

    Angular快速学习笔记(4) -- Observable与RxJS

    当有消费者调用 subscribe() 方法时,这个函数就会执行。 订阅者函数用于定义“如何获取或生成那些发布的值或消息”。...执行所创建的可观察对象,并开始从中接收通知,你就要调用它的 subscribe() 方法,并传入一个观察者(observer)。...在开始执行后可能执行零次或多次。 error 可选。用来处理错误通知。错误会中断这个可观察对象实例的执行过程。 complete 可选。用来处理执行完毕(complete)通知。...为什么NG使用observable而不是Promise? 可观察对象不会修改服务器的响应(和在承诺上串联起来的 .then() 调用一样)。...典型的输入提示完成一系列独立的任务: 从输入中监听数据。 移除输入值前后的空白字符,并确认它达到了最小长度。

    5.2K20

    深入理解 RequestAnimationFrame

    为什么你感觉不到这个变化?...SetInterval 理解了上面的概念以后,我们不难发现,SetInterval 其实就是通过设置一个间隔时间来不断的改变图像的位置,从而达到动画效果的,但我们会发现,利用SetInterval 实现的动画在某些低端机上会出现卡顿...以上两种情况都会导致 SetTinterval 的执行步调和屏幕的刷新步调不一致,从而引起 丢帧 现象, 那为什么步调不一致就会引起丢帧呢?...函数节流:在高频率事件( resize, scroll 等)中,为了防止在一个刷新间隔内发生多次函数执行,RequestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性...,也能更好的节省函数执行的开销,一个刷新间隔内函数执行多次时没有意义的,因为显示器每16.7ms刷新一次,多次绘制并不会在屏幕上体现出来。

    1.4K10

    浅谈Hooks&&生命周期(2019-03-12)

    ngOnInit()在一个或多个数据绑定输入属性发生更改 之前和之后调用。 ngOnInit() 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。...在每次更改检测运行期间,在ngOnChanges()和之后立即调用ngOnInit()。...Hooks React v16.7.0-alpha 中第一次引入了 Hooks 的概念, 为什么引入这个东西呢?...看到这里,心里可能会有这样的疑问:如果组件中多次使用 useState 怎么办?React 如何“记住”哪个状态对应哪个变量?...同时,由于前文所说hooks可以反复多次使用,相互独立。所以我们合理的做法是,给每一个副作用一个单独的useEffect钩子。这样一来,这些副作用不再一股脑堆在生命周期钩子里,代码变得更加清晰。

    3.2K40

    详解 JS 中的事件循环、宏微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项

    语法 let intervalID = setInterval(function[, delay, arg1, arg2, ...]); function:定期执行的函数。...此外,浏览器或者环境可能对这些函数的行为有特定的限制,如在后台标签页或未激活的窗口中降低定时器的精度或延迟执行,以优化性能和电池寿命。 拓展提问:为什么销毁定时器?Vue中如何销毁定时器?...这对于处理错误、清理资源或者在继续其他事件之前进行其他紧急计算是非常有用的。...解决状态更新问题:有时候,你可能在同一方法中多次更改数据,使用 nextTick 可以确保所有的 DOM 更新都完成后再执行某些操作。...为什么销毁定时器? 我是 fx67ll.com,如果您发现本文有什么错误,欢迎在评论区讨论指正,感谢您的阅读!

    25210

    从一个超时程序的设计聊聊定时器的方方面面

    如果在逻辑代码中访问了临界资源,会不会因为多次定时器重叠触发造成程序死锁? 不会,JS程序是单线程的。后面应当触发执行的代码,会被前面的延后。...对于函数setInterval第二个参数的描述,确准一点应该这样讲: 用户期望的,不小于此的定时器间隔时间,单位毫秒。 setInterval并不能保证定时器代码每隔一定时间如期执行。...由于JS是单线程的,没有专门负责渲染UI的线程,如果引擎长时间耗于某段执行超过200ms的代码,就会呈现卡顿现象。解决方法,就是善用JS的异步机制。...换言之,如果间隔时间较长,使用setInterval基本没有问题;如果间隔时间较短,且上下可能存在数据依赖或资源竞争,当使用setTimeout。 下面的代码为什么在小游戏中不能运行?...在实际的企业项目开发中,对于一些网络请求,可能需要尝试3次甚至多次。 习题 1,下面代码的输出是什么?

    1.4K20

    编程篇(002)-js实现一个打点计时器

    如果多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。...setInterval( ) 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。...语法:setInterval(code ,millisec[,"lang"]) setInterval()方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。...注意:两个方法的第一个参数可以是字符串,也可以是函数 (1)如果是字符串, 则参数是 执行的javascript代码串(加双引号), 当 作普通javascript语句执行即可 。...若返回值是另一个函数对象X,则执行的是函数X里的内容;若函数没定义返回值时值为undefined,或返回值为非函数对象,则无任何执行操作。

    1.9K20

    一步步教你弹性框架-下篇

    相关阅读: 一步步教你弹性框架-中篇 一步步教你弹性框架-上篇 第六步 运动功能函数封装 首先在一个元素点击时,应当执行一个功能函数,这个功能函数我们将其独立出来,作为一个全局的函数而存在,从而实现多次调用...在整个功能当中,发生位置变化的元素是不确定的;每次的终点值以及起点值也是不确定的。对于到底通过哪种属性让元素变化(之前我们采用的是margin-left,如果使用定位也是可以采用left的)。...-便于理解 move.style.marginLeft = startVal + "px"; // 通过修改marginLeft实现块向右运动 }, 24); } PS:对于基本结构与样式代码...但是这种方式会导致一些问题,在多次点击时,虽然并不会停不下来或造成抖动,但是会对“弹簧”的整体效果产生影响,让人感觉有些卡顿(相当于每次点击之后都是重新一个动画,而速度不同会让人感觉不流畅) 因此,我们采用另一种方式...,用一个布尔值判断当前是否已经点击过按钮,如果点击过,则不再执行,如果还没有点击过,则执行运动功能函数。

    89740
    领券