情景
當我點擊了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 執行關系
參考