关于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