作者:
awpadam (adam!)
2018-02-14 10:01:54各位前輩好,我是原PO
我覺得我的問題可以簡化如下
<body>
<div id="test"
style="height:100;width:100;position:absolute;background-color: red">
<script>
divobj = document.getElementById("test");
divobj.style.left = 500;
for( var i = 0 ; i < 1000000000 ; i++ ){
}
</script>
</body>
會發現圖片並不會先往右邊移動,然後才開始跑迴圈
先是先跑完迴圈 大概等個幾秒,圖片才往右移動
請問是否有什麼方法,可以讓圖片先往右移動,然後才跑迴圈嗎
※ 引述《awpadam (adam!)》之銘言:
: 小弟應徵某公司的C程式設計師
: 然後進了公司,就默默的開始寫js了...
: 完全不熟,現在遇到一個狀況不知道是什麼原因
: 跪求板上高手神人指教
: 我有一個html頁 名叫 background.html
: background.html有一個video tag ,裡面正在播放影片
: background.html還有一個iframe
: iframe裡面可能會讀取a.html 或 b.html
: 這兩頁都需要播放影片
: 於是background.html的那個video tag就擔負起播放影片的責任
: 進入a.html時,裡面的js會把 parent 的video tag設成他要的
: 大小、位置,語法大概是這樣
: parent.videoDOM.style.height = 320 ;
: parent.videoDOM.style.width = 480 ;
: 之類的
: 進入b.html時也會做類似的事情,把video tag 設成他要的大小和位置
: 在a.html及b.html的 unload 事件發生時,會先把video tag 的css設成 隱藏
: parent.videoDOM.style.display = "none"
: 然後在a.html及b.html的 onload 事件發生時,會把隱藏取消
: 現在情況是 b.html裡面含有許多大量耗資源的js計算
: 在a.html 使用者點擊換頁按鈕,要把分頁跳到b.html時
: 那個video tag 會卡在畫面上,似乎在等b.html把js算完
: 卡了一小段時間後,才不見,然後被b.html重設大小和位置
: 我覺得會不會是 在 a.html的unload事件發生,把video設成隱藏之後
: 在進入b.html的時候,會先讀取完所有js的資料,才開始解析css的東西
: 所以才會有這種情形
: 不知道我猜的對不對
: 如果我猜對的話,請問我這種情況,分頁共用母頁的一個video tag
: 且其中有些分頁的js計算很慢的話,我應該怎麼讓這個video tag
: 至少不要卡在畫面上呢?
作者: tino1991 (深白) 2018-02-14 11:06:00
作者:
Kenqr (function(){})()
2018-02-14 12:12:00setTimeout,在callback裡才執行迴圈
作者: dannypsnl (秦書) 2018-02-14 13:06:00
因為那樣迴圈就到背景去執行了(概念上啦),詳細的你要看async相關的文章
作者:
Kenqr (function(){})()
2018-02-14 16:04:00我的理解是js執行到一半的時候,瀏覽器不會更新畫面。放在setTimeout的部份,算是另一個thread,不會連續執行,所以中間有空檔可以更新畫面。至於執行到一半不更新畫面的理由,應該是效能考量。
作者: dannypsnl (秦書) 2018-02-14 17:48:00
對,樓上說的比較清楚
作者:
jmlntw (吉米林)
2018-02-14 19:54:00用 requestAnimationFrame()
作者:
art1 (人,原來不是人)
2018-02-15 08:47:00