情景

當我點擊了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渲染结束再执行的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。