關於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 執行關系

參考


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM