2014-07-24 3 views
-2

나는 레이어 애니메이션을 만들기 위해 동시에 실행하고 싶은 두 개의 자바 스크립트가 있습니다. 둘 다 본질적으로 동일한 스크립트이지만 설정이 다릅니다.Concurently running javascripts onload

각 기능을로드하는 데 <body onload="animate(); ch();">을 사용합니다.

별도로 두 루프 모두 정상적으로 작동합니다. 둘 다 동시에 실행하려고하면 문서의 첫 번째 항목이 제대로 실행되지만 두 번째 항목은 실행되지 않습니다.

저는 jsfiddle에 익숙하지 않지만 jsfiddle은 document.write의 사용에 대해 걱정하며 jsfiddle에 하나 이상의 자바 스크립트를 포함시키는 방법을 모릅니다.

두 스크립트 모두 루프이며 무한 루프됩니다. http://nanocluster.umeche.maine.edu/scope/

UPDATE : 별도로, 여기에 각이 어떻게 보일지입니다 HTML 소스 :

http://nanocluster.umeche.maine.edu/scope/saw.html

사람이 내가 같은 시간에 반복 두 스크립트를 모두 가질 수있는 방법을 지적 할 수 있습니까?

<!DOCTYPE html><html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link rel="shortcut icon" href="http://www.hackmaine.org/favicon.ico"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<title>Epic Lulz</title> 
<style> p.ex {color:rgb(0,0,0);}</style> 
</head> 
<body onload="animate(); ch();"> 
    <script type="text/javascript" src="animate.js"></script> 
    <script type="text/javascript" src="ch.js"></script> 
<div id="background"> 
<pre> 
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+ 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+ 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+ 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+ 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
|   |   |   |   |   |   |   |   |   |   | 
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+ 
_____________________________________________________________________________________________________ 
t1:288 ms t2:480 ms Display Mode: Normal: Peak Detect Vectors: OFF  Grid = FULL 
</pre> 
</div> 
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat1"> 
<pre> 

    ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ 
    │  │ │  │ │  │ │  │ │  │ │  │ │  │ 
──┘  └────┘  └────┘  └────┘  └────┘  └────┘  └────┘ 


</pre></div> 
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat2"> 
<pre> 

┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ 
│  │ │  │ │  │ │  │ │  │ │  │ │  │ 
     └────┘  └────┘  └────┘  └────┘  └────┘  └────┘  └── 


</pre></div> 
<div class="container" style="visibility: hidden; color: rgb(254, 0, 0);" id="cat3"> 
<pre> 

    ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ 
    │  │ │  │ │  │ │  │ │  │ │  │ │  │ 
──┘  └────┘  └────┘  └────┘  └────┘  └────┘  └────┘ 


</pre></div> 
<div class="container" style="visibility: hidden; color: rgb(254, 0, 0);" id="cat4"> 
<pre> 

┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ 
│  │ │  │ │  │ │  │ │  │ │  │ │  │ 
     └────┘  └────┘  └────┘  └────┘  └────┘  └────┘  └── 


</pre></div> 
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat5"> 
<pre> 

    ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ 
    │  │ │  │ │  │ │  │ │  │ │  │ │  │ 
──┘  └────┘  └────┘  └────┘  └────┘  └────┘  └────┘ 


</pre></div> 



    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat1"> 
    <pre> 





&Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda;            
\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/             
    V V V V V V V V V V V V V V V V V V V V  

</pre></div> 


    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat2"> 
    <pre> 





    &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda;            
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\              
V V V V V V V V V V V V V V V V V V V V \ 

</pre></div> 

    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat3"> 
<pre> 





    &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda;            
\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\              
V V V V V V V V V V V V V V V V V V V V  

</pre></div> 

    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat4"> 
    <pre> 





&Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda;            
\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/             
    V V V V V V V V V V V V V V V V V V V V  

</pre></div> 

    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat5"> 
    <pre> 





    &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda; &Lambda;            
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\              
V V V V V V V V V V V V V V V V V V V V \ 

</pre></div> 

</body></html> 
+0

질문에서 제공 한 것과 "동시에 실행"하는 방법을 보여줄 수 있습니까? –

+1

다른 하나를 빠르게 반복하면 동시에 인상을 주지만 setTimeOut을 사용하여 비동기 호출을 시도 할 수 있습니다 – juvian

+0

동시에 두 가지를 실행할 수 있다면이 질문을 할 수 없습니다. 나는 비록 코드를 게시 할 것이다. – j0h

답변

0

3 단락의 진술에 따라 브라우저에서 실행한다고 가정합니다. "... 문서 중 첫 번째 것 ...".

이 가정이 맞으면 브라우저에서 병렬로 실행할 수 없습니다.

+0

IDK 남자 나는 그것을 할 수 있다고 생각한다. – j0h

+0

웹 노동자들과 함께 할 수 있다고 생각합니다. 방금 전에 읽었지만 여러 개의 샘플 스크립트가 동시에 실행되었습니다 .http : //www.html5rocks.com/en/tutorials/workers/basics/ – j0h

+0

WebWorkers가 DOM에서 작동하도록 허용하지 않는 것으로 보입니다 . 계산 및 기타 유용한 작업을 수행하는 백그라운드 프로세스를 실행할 수 있습니다. 하지만, DOM을 동시 스레드로 조작 할 수 있다고는 생각하지 않습니다. – ussabin