关于angularjs dom渲染结束再执行的问题

情景

当我点击了button, div才能显示。并且我想知道这个div的高度。

问题

当我点击这个button以后这个。chrome就然告诉我这个div高度是0.这不是睁着眼睛说瞎话吗？怎么能如此欺骗我这个纯真少女的感情！！！

分析

感谢我的同事在我身边给我给我指导！
正式点我要开始说说问题的解决了！！！
总结其实是这样的当我点击了这个button以后 Angularjs还没有渲染完dom,这个时候就直接取了div的值，当然是0.

解决这个问题先要了解Event loop!!!
什么是event loop?

我们知道js再一出生的时候就想将它运用于网页脚本上面，所有不能太复杂。就用单线程吧！
单线程就意味着执行完一个任务再执行另外一个任务, 会造成很多浪费。
于是我们将任务分成两种同步任务和异步任务。

同步任务就是主线中运行的，也叫执行栈。
主线任务外还存在一个任务列表，异步任务有了结果，存在任务列表。
主线任务完成就会读取任务列表，执行相应的异步任务。等待结果解释，再去执行主线任务。

任务队列中完成一个I/O任务，就会添加一个事件，表示相关任务可以进入执行栈了。主线程读取"任务队列"，就是读取里面有哪些事件。
回调函数会放在主线中调起来，当异步任务执行完后，就会执行对应的回调函数。

主线从任务队列中读取事件，这个机制就叫event loop。

好吧简单点来说就是click事件已经放入任务队列中了，我们只需要再click事件放入事件队列后，再放入取高度的事件到事件队列中就可以依次实行。

而setTimeout()就可以实现将事件插入了"任务队列"中。

解决

在angularjs中可以使用$timeout

注意 $timeout 第三个参数，是否调用 apply 方法，这是 AngularJS 性能的一个优化点。

因此此处用法是 $timeout( function (){ $(div).height() } , 0 , false);

angular与event loop 执行关系

参考

http://www.ruanyifeng.com/blog/2014/10/event-loop.html
http://notes.iissnan.com/2014/waiting-for-dom-to-finish-rendering/
https://github.com/ShuyunXIANFESchool/FE-problem-collection/issues/11

转载于:https://www.cnblogs.com/mayufo/p/5656608.html

关于angularjs dom渲染结束再执行的问题相关推荐

当前线程等待某些线程运行结束再执行的几种方案。CountDownLatch机制简单解读以及简单实现
需求背景:如果没有采取什么措施,在开启分支线程后,当前线程继续往后执行,而不会阻塞等待分支线程,代码及运行结果如下. 1. Thread类的join方法优点:如果当前线程需要指定某些线程结束后再执行 ...
dom渲染完毕再渲染数据_在vue组件中，异步手动渲染dom
在业务中,页面会动态的渲染组件,组件中会根据数据,去特殊处理渲染dom元素,当遇到需要异步的去渲染时,会出现异步的问题无法正常显示.如下,重新生成一个组件进行渲染. 使用基础 Vue 构造器,创建一个 ...
Thread：主线程等待子线程执行完毕再执行解决办法
线程从启动到执行完毕,一般会有一些耗时操作,并不能像一般的程序语句,就能立马结束.如下代码: package com.xxx.async; public class WaitThreadDone {p ...
Java多线程之----主线程会等待子线程结束再结束么，怎么让主线程等待子线程结束呐？
首先给出结论: 主线程和子线程之间没有谁先谁后结束这种关联,它们只是各自负责自己的线程任务,如果该线程的任务结束了,该线程自然会结束运行. talk is cheap,show me the code ...
微任务，宏任务，DOM渲染的执行顺序
event loop过程同步代码,一行一行放在Call Stack执行遇到异步先记录下来,等待时机(定时,网络请求) 时机一到立马推入Callback Queue中如Call Stack为空(同 ...
python线程的注意点（线程之间执行是无序的、主线程会等待所有的子线程执行结束再结束（守护主线程）、线程之间共享全局变量、线程之间共享全局变量数据出现错误问题（线程等待(join)、互斥锁））
1. 线程的注意点介绍线程之间执行是无序的主线程会等待所有的子线程执行结束再结束线程之间共享全局变量线程之间共享全局变量数据出现错误问题 2. 线程之间执行是无序的 import thread ...
python进程的注意点（进程之间不共享全局变量、主进程会等待所有的子进程执行结束再结束）
1. 进程的注意点介绍进程之间不共享全局变量主进程会等待所有的子进程执行结束再结束 2. 进程之间不共享全局变量 import multiprocessing import time# 定义全局变 ...
jQuery：等页面DOM加载完毕后再执行代码
等着页面DOM加载完毕后再执行代码第一种方式(比较麻烦,不常用): $(document).ready(function(){ - }) 第二种方式(常用): $(function(){ - }) ...
面试官：如何让主线程等待所有的子线程执行结束之后再执行？我懵了
使用Thread的join方法 package com.qcy.testThreadFinish;/*** @author qcy* @create 2020/09/09 17:05:23*/ pub ...

关于angularjs dom渲染结束再执行的问题

情景

问题

分析

解决

关于angularjs dom渲染结束再执行的问题相关推荐

最新文章

热门文章