功能在一個接一個的順序在JavaScript中同時工作

我是JavaScript新手，觀察到身體標記中的2個函數onload =「expand（）; fadeOut（）;」鏈接http://jsfiddle.net/ankur3291/F8pXj/6/是按順序排列的，所以必須逐一執行，但是當看到結果時，似乎兩個函數都在同時運行。爲什麼這樣？他們爲什麼不連續執行？（PLZ不要嘗試更新在指定的鏈接代碼....因爲鏈接會再更改）另請參見下面的代碼：功能在一個接一個的順序在JavaScript中同時工作

<html> 
<head> 
<title>dimensions</title> 
<style type='text/css'> 
body{margin:0;} 
.box{display:block;background-color:green;} 
#container{height:100px;width:100px;position:relative;top:150px;left:150px;} 
#contain{display:block;position:fixed;height:200px;width:200px;top:100px;left:100px;font-size:50px;t 

ext-align:center;line-height:200px;opacity:0;background-color:orange;} 
</style> 
<script type='text/javascript'> 

function expand(){ 
    var obj=document.getElementById("container"); 
    var h=100 
    var w=100 
    var t=150 
    var l=150  

    function frame() 
    {  
     t=t-2; 
     l=l-1.97*2; 
     h=h+4; 
     w=w+1.96*4; 

      obj.style.height=h+'px'; 
     obj.style.width=w+'px'; 
     obj.style.top=t+'px'; 
     obj.style.left=l+'px'; 

     if(t<=5 || l<=5) 
      clearInterval(timer); 
    } 
    var timer=setInterval(frame,1); 
} 
function fadeOut(){ 
    var obj=document.getElementById("contain"); 
    var o=0; 
    function frame(){ 
     obj.style.opacity=o; 
     o=o+0.01; 
     if(o>=1) 
      clearInterval(timer); 
    } 
    var timer=setInterval(frame,1); 
} 
</script> 
</head> 
<body onload="expand();fadeOut();"> 
<div class="box" id="container"> 
</div> 
<div id="contain"> 
Unicorn 
</div> 
</body> 
</html>

來源

2013-07-07 Ankur Shah

這是由於的方式，setInterval作品。這兩個函數都設置了一個每毫秒調用一次的時間間隔（儘管很可能實際上調用次數會減少）。

在你的例子中，這兩個函數安排他們的更新函數使用setInterval運行。 body標籤的onload屬性中定義的函數被順序調用;然而，將動畫分塊成小塊使其看起來像，因爲它們是並行運行的，由於JavaScript本身固有的單線程特性，所以絕不是這種情況。

作爲一個非常寬泛的經驗法則，您可以比較它的工作方式和單線程進程調度程序，它們可以很快地在多個進程間交替進行。在任何特定時刻只有一個進程運行，但活動進程的頻繁更改會造成並行性的錯覺。

來源

2013-07-07 22:13:00

現在我真的變得更加困惑，有些人說（我向他們說過）javascript是多線程的，但你說它本質上是單線程的。你可以提供任何有關這方面的證據嗎？此外，正如你所說的「動畫塊」...如果我沒有錯，你說它的setInterval（）語句，不是這些函數立即運行，如果他們立即運行，這兩個函數似乎不會並行運行，還是像現在每個setInterval語句都有兩個線程，並且它們在幾毫秒內切換以執行？ Plz澄清這一點！ –

@AnkurShah John Resig在http://ejohn.org/blog/how-javascript-timers-work/中解釋了JavaScript執行在單個線程中運行。他還解釋了'setInterval'和'setTimeout'是如何工作的，所以一定要閱讀他的文章。如果您想了解更多有關唯一異步功能（即* events *）如何工作的信息，請查看此問題的非常詳細的第一個答案：http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to - 是單線程的 –

您的函數調用會連續執行。但是，它們都執行第一次迭代，設置Interval並退出，因此第二次和隨後的迭代都將由您的定時器調用，並且似乎是同時執行的。如果你想連續執行，那麼在第一個定時器計數完之後，從第一個函數調用第二個函數。

來源

2013-07-07 22:16:08

本質上是多線程的JavaScript？...我得到了你所說的，但在多線程方面，兩個定時器都充當一個線程，並且在兩個功能完成後立即處理定時器線程切換它們的進程以執行並且似乎同時運行。我的解釋是否正確？ Plz回覆... –

Javascript是單線程的，但在這裏沒有關係。你的問題來自定時器的異步特性。不要混淆'異步'和'多線程'。 – 2013-07-29 09:25:14

功能在一個接一個的順序在JavaScript中同時工作

回答

相關問題