2014-02-14 8 views
0

스크립트를 동적으로 추가하려면 스크립트 요소를 만들고 스크립트 요소의 src 속성을 추가하고 마지막으로 head 태그 (또는 다른 태그)에 script 요소를 추가해야합니다. 그러나이 동작은 동기식이며 자바 스크립트가 완전히로드 될 때까지 페이지가 차단됩니다. 거기에 가능한 모든 작업을 xhr 사용하지 않고 비동기 적으로 JavaScript 포함 할 수 있습니다 알고 싶습니다. 당신이 async attribute을 사용하지 않는버튼 클릭시 비동기 클릭 방법

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'urlofthescript'; 
$("#someElement").append(script); 
//the above line blocks the UI until it gets loaded. Why? 

답변

0

<script src="..."> 태그는 항상 동기가 될 것입니다. 그러나 <script>code goes here</script>을 삽입하면 지연없이 (JS 스레드를 포기하자마자) 실행이 시작됩니다. 문자열에 코드를 작성하거나 AJAX를 통해로드 한 다음 document.createTextNode(code), document.createElement('script'), appendChild 코드를 스크립트에 입력 한 다음 문서에 스크립트를 작성하십시오. 또 다른 가능성은 RequireJS와 같이 최근에 생겨난 우수한 모듈 시스템을 사용하는 것입니다.

+0

스크립트를 내 URL에 몇 초 (10 초) 걸리면 다음 10 초 동안 UI가 차단된다는 메시지가 표시되는지 묻고 싶습니다. 비동기 속성을 통해 제거 할 수 있습니까? –

+0

또한 지정된대로 requirejs와 같은 다른 라이브러리를 사용하여 이것을 구현하고 싶지 않습니다. xhr 메소드도 허용되지 않습니다. –

+0

"스크립트 렌더링"이란 무엇을 의미합니까? 실행한다는 뜻입니까? 또는 그것을로드? 스크립트 * 로딩 *은 링크에 따라 브라우저를 지원하는 브라우저에서'async'를 사용하여 비동기적일 수 있습니다. 스크립트 * 실행 *은 주기적으로 JS 스레드의 제어권을 양도하는 방식으로 작성하지 않는 한 비동기 적이 될 수 없습니다. – Amadan