2013-04-05 4 views
0

제가 자바 스크립트를 배우고있을 때 데스크탑 애플리케이션 배경에서 왔는데, 자바 스크립트의 스레딩 메커니즘을 이해하는 것은 정말 어렵습니다. 예를 들어자바 스크립트에 멀티 스레딩이 있습니까?

:

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#btn1").click(function(){ 
     for (var i = 0 ; i < 100000 ; i ++){ 
      $("#loop1").html(i); 

     } 
    }); 

    $("#btn2").click(function(){ 
     for (var i = 0 ; i < 100000 ; i ++){ 
      $("#loop2").html(i); 

     } 
    }); 
}); 
</script> 
</head> 
<body> 

Loop 1 : <p id="loop1"></p> 
<button id="btn1">Button 1</button> 
<br/><br/><br/> 

Loop 2 : <p id="loop2"></p> 
<button id="btn2">Button 2</button> 

</body> 
</html> 

나는 그것을 클릭하면 버튼 2가 반응하지 않도록 나는, 버튼 1, 브라우저 요령 클릭

. 일반적으로 데스크톱 응용 프로그램에서 루핑을 백그라운드 스레드에 게시합니다. 하지만 자바 스크립트로 어떻게 할 것인가? 또는 Javascript에서 긴 처리를 처리하는 가장 좋은 방법은 무엇입니까?

아래 코드는 작동하지 않습니다,하지만 왜 확실하지 :


편집.

$("#btn1").click(function(){ 

     setTimeout(function(){ 
      for (var i = 0 ; i < 100000 ; i ++){ 
       $("#loop1").html(i); 

      } 
     } 
     , 0); 
    }); 
+0

이 읽기 ​​- http://www.htmlgoodies.com/html5/tutorials/introducing-html-5-web-workers-bringing-multi-threading- to-javascript.html # fbid = pjvP9hIpB6g – lifetimes

+0

또한 http://www.sitepoint.com/multi-threading-javascript/. –

답변

2

, WebWorkers는를 멀티 스레딩 을위한 자바 스크립트의 유일한 옵션이다. DOM 수정을 원한다면 불행히도 희망이 없습니다. 당신이 setTimeoutsetIntervalUI를 동결 여전히 업데이트를 수신하지 않습니다와 함수를 호출 할 때

은 무엇 대부분의 사람들이 잊지 같습니다. 귀하의 경우에는

function btnClickHandler() { 
    setTimeout(doStuff, 1); // prevent UI freeze 
} 

function doStuff() { 
    // do your stuff here 
} 

:

var i, interval; 

$("#btn1").click(function(){ 
    i = 0; // reset i 

    // create interval 
    interval = setInterval(btn1Handler, 1); // run btn1Handler every 1ms 
}); 

function btn1Handler() { 
    $("#loop1").html(i); 

    if(i++ >= 100000) { 
     // cancel the interval 
     clearInterval(interval); 
    } 
} 
+0

귀하의 예는 대단합니다. 그것은 완벽하게 작동합니다. 나는 내 질문을 편집했다.이 예제를 추가하기 전에, 나는 당신의 의미를 오해하고 위의 아이디어를 가지고 나왔다. 왜 내 질문에 편집 된 코드의 코드가 작동하지 않는지 아십니까? – GMsoF

+0

나는 setinterval과 settimeout의 동작이 새로운 스레드를 만드는 것과 매우 비슷하다는 것을 혼란스럽게 생각합니다. 하지만 모두 자바 스크립트를 말하는 단일 스레드입니다. setinterval과 settimeout이 어떻게 마법을했는지 궁금합니다. – GMsoF

+1

'setTimeout'과'setInterval'은 시간 기반이기 때문에 스크립트를 차단하지 않기 때문에 다시 시작됩니다. 그러나 타임 아웃 내에 전체 루프를 실행하는 대신 간격을 루프로 사용하는 것이 좋습니다. 시간 초과 또는 간격 처리기 후 UI가 업데이트됩니다.타임 아웃/인터벌 처리기 내부에서 반복하면 UI가 고정됩니다. –

2

자바 스크립트에는 기본적으로 멀티 스레딩이 없습니다.

일부 기술은 HTML5 사양 (WebWorkers)에 멀티 스레드를 구현하려고 시도하지만 일부는 자바 스크립트 자체에서이를 구현하려고하지만 기본 사양 (ECMA)은 단일 스레드입니다. 당신은 (그들이 직접 DOM을 변경할 수 없습니다) web workers를 사용하는 경우 그냥 구글에서 검색 한 수

..

+0

"Javascript에는 기본적으로 멀티 스레딩이 없습니다." WebWorkers는 멀티 스레드가 아니거나 네이티브가 아닙니까? –

+0

이것은 ECMA 사양의 일부가 아니며 DOM 확장입니다. – Gui13

0

는 별개로, 브라우저에서 한 명의 사용자 만 자바 스크립트 스레드가있다.

이벤트는 함수가 반환 될 때까지 쌓여 있습니다. 당신은 두 개의 장기 실행 연산을 병렬로 DOM을 변경할 수 없습니다. 이전 답변은 이미 언급 한 바와 같이

관련 문제