关于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
关于angularjs dom渲染结束再执行的问题的更多相关文章
- Javascript:再论Javascript的单线程机制 之 DOM渲染时机
Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...
- angularjs中如何在异步请求执行完以后再执行其他函数?
angularjs中如何在异步请求执行完以后再执行其他函数? 之前脑袋回路就是从上到下的执行js,直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里,然后才开始正视 ...
- Vue.nextTick DOM 更新循环结束之后执行延迟回调
在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统 ...
- C# 多线程join的用法,等待多个子线程结束后再执行主线程
等待多个子线程结束后再执行主线程 class MultiThread{ #region join test public void MultiThreadTest() { Thread[] ths = ...
- angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?
angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法 关键字: $timeout app.directive("myDirective",func ...
- Angularjs判断页面是否已经渲染结束(动态给标签长度)
相信大家都会碰到这样的问题.页面循环li.但是因为个数不知道.没有办法给li设置固定宽度.那么这时就需要动态计算数据长度并动态改变li的宽度 <!--周边信息--> <div cla ...
- 多个线程运行结束之后主线程再执行CountDownLatch
多个线程运行结束之后主线程再执行CountDownLatch 学习了:http://blog.csdn.net/lvyuanj/article/details/50737123 这个要膜拜一下! h ...
- angular先加载页面再执行事件,使用echarts渲染页面
剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...
- angular中关于自定义指令——repeat渲染完成后执行动作
业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...
随机推荐
- Oracle 根据逗号分隔字符串 同时记录一波坑
报表需要过滤掉不需要的数据,由于报表是根据零件编号来统计,需要过滤掉不合格品,只能根据关联的物料编码(零件编号)来过滤,只能通过not in来过滤,但是天真的我却用下面代码来当子查询: b.part_ ...
- 让DIV的滚动条自动滚动到最底部 - 3种方法
要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...
- 为IE和chrome编写单独的样式
flex布局在IE10上不支持,为IE10编写特定的样式可以用判断navigator.userAgent 的方法 var doc = document.documentElement; doc.set ...
- codechef AUG17 T2 Chef and Mover
Chef and Mover Problem Code: CHEFMOVR Chef's dog Snuffles has so many things to play with! This time ...
- HDU1083_Courses_课程_C++
给你们人工翻译一下题目哈,刚好练一下英语 对于一个组中有 N 个学生和 P 种课程.每个学生能够参加0种,1种或者更多的课程.你的任务是找到一种可能的方案使恰好P个学生同时满足下列条件: ‧ 方案中的 ...
- css3实现图片划过一束光闪过效果
该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...
- Appium+python自动化5-Appium Inspector【转载】
前言 appium Inspector从入门到放弃!反正你都打开了,那就看下为什么要放弃吧! Appium Inspector是appium自带的一个元素定位工具,上一篇介绍了如何使用uiaut ...
- linux题目整理(一)
1.Linux如何挂载windows下的共享目录? mount.cifs /IP地址/server/ /mnt/server -O user=administrator password=yourpa ...
- MVC中AuthorizeAttribute用法并实现授权管理
1.创建一个类(用来检查用户是否登录和用户权限)代码如下 public class MemberCheckAttribute : AuthorizeAttribute { //AuthorizeAtt ...
- App接口加密解密方法
//加密 function encrypt($data) { $key = md5("safregr"); $str = base64_encode($data); $res = ...