Re: [討論] javascript是共時、多執行緒嗎?

看板Ajax作者sk1765 (鼎玉鉉)時間12年前 (2011/11/07 14:06)推噓2(2推 0噓 22→)

留言24則, 4人參與討論串6/11 (看更多)

為了確認同一個頁面多個iframe也只有一個thread 我剛實測了同一個頁面兩個iframe 裡面各自跑timer 兩個iframe同時去更新父視窗還是用原來的12一組 34一組測試結果 12 34不會交叉出現 13 24 或14 32都不會出現 tyx的說法是正確的不管ie,ff,chrome,opera都只有一個thread 所以opera的文件?? 不了解是不是他們自己也寫錯程式連結: http://www.briantest.site88.net/test.html 程式如下: test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe multithread?</title> <script> i = 0; </script> </head> <body> <div id='show'></div> <iframe src='test1.html'></iframe> <iframe src='test2.html'></iframe> </body> </html> -------------------------------------------------------------- test1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe1</title> <script> var s=null,t1=null; window.onload = function(){ s = parent.document.getElementById('show'); t1 = setInterval( A ,1); } function A() { var x = window.parent.document.createTextNode('1'); s.appendChild(x); var y = window.parent.document.createTextNode('2'); s.appendChild(y); window.parent.i++; if (window.parent.i>=1000) { clearInterval(t1); } if (window.parent.i%10==0) s.appendChild(window.parent.document.createElement('br')); } </script> </head> <body> </body> </html> ---------------------------------------------------- test2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe2</title> <script> var s=null,t2=null; window.onload = function(){ s = parent.document.getElementById('show'); t2 = setInterval( B ,2); } function B() { var x = window.parent.document.createTextNode('3'); s.appendChild(x); var y = window.parent.document.createTextNode('4'); s.appendChild(y); window.parent.i++; if (window.parent.i>=1000) { clearInterval(t2); } if (window.parent.i%10==0) s.appendChild(window.parent.document.createElement('br')); } </script> </head> <body> </body> </html> 所以我們就當alert是一個特例吧我在opera ff 都看到兩個A疊在一起不知道這算不算bug 有錯請指教 ※ 引述《tyx (?????????????????)》之銘言： : 在同一個 page 裡只有一個 thread 在執行 : 不管有幾個 iframe 都一樣 (但 Opera 不是推文有連結) : 那為何有不同的行為 : 我以 senser 的範例作說明 : 1. FireFox : 當 FF 執行 $('ifa').src = 'javascript:alert("A");alert("B")'; 時 : 會先 parse 這段 javascript 但並不會立刻執行此 js : 而是產生一個 '要執行此 js 的 event'（暫時稱為 event1）在 event queue 裡 : 之後執行下一行 $('ifb').src = ... 並產生 event2 : 然後 thread 回去 event queue 取到 event1 並執行 alert("A") : 此時會看到 alert("A") 的 dialog : 此 dialog 出現時除了此 dialog 以外 page 的 input 都會被 disabled : 所以不會有其他 UI events : 當 alert("A") dialog 執行時內部也有個 event loop 在取 event 出來執行 : 所以會取到 event2 並執行 alert("C") : 當你按掉 alert("C") 之後會立刻執行 alert("D") : 再按掉 alert("D") 又會回到 alert("A") 的內部 event loop : 再按掉 alert("A") 之後會執行 alert("B") : 所以會看到 alert("A") 出現後立刻出現 alert("C") : 然後結束 alert("C") 立刻出現 alert("D") : 然後結束 alert("D") 回到 alert("A") : 然後結束 alert("A") 立刻出現 alert("B") : 2. IE : 當 IE parse 完 js 之後會立刻執行所以才會 : 出現 A 按掉A之後出現 B 按掉 B 之後出現 C 按掉 C 之後出現 D : ps: 至於 console.log("A") 會依序出現 : 是因為執行 console.log("A") 時 : 並不會偷偷跑 event loop : 所以 C D 不會偷跑囉 : ※ 引述《senser (彷彿曾經一起死過)》之銘言： : : alert在不同thread下(iframe)到底會怎樣我倒是沒有研究過 : : 我把您的code改成 : : var $ = function(id){return document.getElementById(id);}; : : $('ifa').src = 'javascript:alert("A");alert("B")'; : : $('ifb').src = 'javascript:alert("C");alert("D")'; : : 我剛剛試的結果 : : 意外發現FF下會先出現A(很快來不急按) 然後被C蓋住之後D 回到A 最後B : : 這有點兩個alert一起出現的味道(只是被蓋住了) : : IE的結果就是同一時間只有一個alert 然後ABCD : : 這跟browser的實作有關 : : 我只能推斷 FF的alert出現時容許其他的thread的alert也出現 : : (不確定是出現兩個一個被"蓋住" 或是同一個alert box然後內容被取代 : : 在我的FF中沒辦法用滑鼠移動alert box) : : 而IE的UI不容許這種情況出現 : : 然後回到問題 : : 在兩個thread併行下 ACBD交叉出現我覺得是有可能的 : : (但我不知道哪個browser可以也沒試著去製造出來過) : : 但是在一個event-driven 的single thread中(前篇文章) 是不會發生的 : : 一個callback只會執行完在去執行下一個不會互相跳來跳去 : : ============== : : 各家瀏覽器對alert的實作略有不同 : : 一般當alert出現時產生alert那段程式會暫停直到按了之後在繼續 : : 然而有些瀏覽器在alert出現時會繼續dispatch的動作 : : dispatch進去的handler中如果是UI trigger的他不會執行 : : 但如果是non-UI 的event handler 像是ajax的callback : : 在某些browser中是會同時執行的即使你的alert還掛在那裏 : : 所以用alert debug的習慣是非常不好的 : : 在你還沒按下時可能有東西就跑起來了 : : 以致於你alert出來的變數也有可能被影響而看到錯的值 : : 真的用在application中更是有可能造成錯誤 (confirm,prompt等等都一樣) : : 根據你甚麼時候按下去你的那段程式才會繼續跑 : : 但是你的non-UI event在背後一樣的dispatch然後fire (如page load,timeout) : : 所以希望大家改掉直接用這種東西當UI的習慣避免不必要的timing issue : : 全部的UI都要自己兜出來比較好 : : === : : 這裡就有現成的例子 : : 剛剛用FF看好像是CDAB (按掉CD時A或若隱若現) : : 如果你沒有注意那個若隱若現的A 你就會以為他的順序真的是CDAB這樣 : : 然而如果你改成console.log("A") : : 就會知道他的真正的順序是ABCD : : 給大家參考:D -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 175.182.110.93 ※ 編輯: sk1765 來自: 175.182.110.93 (11/07 14:14)

→

weiyucsie

11/07 14:19, , 1^F

11/07 14:19, 1^F

→

sk1765

11/07 14:23, , 2^F

11/07 14:23, 2^F

→

weiyucsie

11/07 14:30, , 3^F

11/07 14:30, 3^F