情景
當我點選了button, div才能顯示。并且我想知道這個div的高度。
問題
當我點選這個button以後這個。chrome就然告訴我這個div高度是0.這不是睜着眼睛說瞎話嗎？怎麼能如此欺騙我這個純真少女的感情！！！
分析
感謝我的同僚在我身邊給我給我指導！
正式點 我要開始說說問題的解決了！！！
總結 其實是這樣的當我點選了這個button以後 Angularjs還沒有渲染完dom,這個時候就直接取了div的值，當然是0.
解決這個問題先要了解Event loop!!!
什麼是event loop?
我們知道js再一出生的時候就想将它運用于網頁腳本上面，所有不能太複雜。就用單線程吧！
單線程就意味着執行完一個任務再執行另外一個任務, 會造成很多浪費。
于是我們将任務分成兩種同步任務和異步任務。
- 同步任務就是主線中運作的，也叫執行棧。
- 主線任務外還存在一個任務清單，異步任務有了結果，存在任務清單。
- 主線任務完成就會讀取任務清單，執行相應的異步任務。等待結果解釋，再去執行主線任務。
關于angularjs dom渲染結束再執行的問題 任務隊列中完成一個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