질문에 답하기 전에. Event Loop에서 나는 http://en.wikipedia.org/wiki/Event_loop을 언급하고 있다고 말하자. 이것은 브라우저가 구현하는 것입니다. 자세한 내용은 http://javascript.info/tutorial/further-javascript-features/events-and-timing-depth을 참조하십시오.자바 스크립트를 완전히 이해하지 못합니다. 스레딩
이 질문은 힘들고 길기 때문에 부담주세요. 그리고 모든 대답에 감사드립니다!
그래서. 자, 내가 이해하는 것처럼, JavaScript에는 하나의 메인 스레드가 있습니다 (대부분의 브라우저 환경에서). 그래서, 같은 코드 :
for (var color = 0x000; color < 0xfff; color++) {
$('div').css('background-color', color.toString(16));
}
흰색 검정색에서 애니메이션을 생산하지만, 다음 틱이 발생 할 때 (렌더링이 완료되기 때문에 코드가 처리 된 후 것을 볼 수 없습니다 - 브라우저가 이벤트 루프로 들어감). 당신이 애니메이션을보고 싶다면
, 당신은 할 수 :에서는 setTimeout이 후 처리됩니다 브라우저 이벤트 루프 스택에 새로운 이벤트를 밀어 때문에
가for (var color = 0x000; color < 0xfff; color++) {
setTimeout(function() {
$('div').css('background-color', color.toString(16));
}, 0);
}
위의 예는, 눈에 보이는 애니메이션을 생성 할 것 아무것도 실행되지 않습니다 (이벤트 루프에 들어가서 다음에 무엇을 할 것인지 확인하십시오).
이 경우 브라우저에 스택으로 푸시 된 0xfff (4095) 이벤트가있는 것으로 보이며 각 이벤트는 그 사이의 렌더링 프로세스로 처리됩니다. 그래서, 제 첫 질문 (# 1)은 정확히 렌더링이 일어날 때입니까? 이벤트 루프 스택의 두 이벤트를 처리하는 사이에 항상 발생합니까?
두 번째 질문은 내가 당신에게 준 javascript.info 웹 사이트 링크의 코드에 관한 것입니다. 여기
...
function func() {
timer = setTimeout(func, 0)
div.style.backgroundColor = '#'+i.toString(16)
if (i++ == 0xFFFFFF) stop()
}
timer = setTimeout(func, 0)
....
내 질문에 그 브라우저가 div.style. ... = ... 라인에 도달 할 때마다 스택 이벤트 루프에 새로운 "렌더링"이벤트를 밀어 것입니까? 하지만 setTimeout 호출로 인해 이벤트가 처음으로 푸시되지 않습니까? 그래서 브라우저는 다음과 같은 스택으로 끝납니 까?
div 스타일이 변경되기 전에 setTimeout 호출이 처리되었으므로?
rendering event
setTimeout event
rendering event
및 렌더링 이벤트 이전의 setTimeout 전화가 계속 : 그 스택과 같은 방법 경우에, 나는 브라우저가 이벤트 루프가의 setTimeout의 콜백을 처리하고 필요 끝날 것를 입력 다음 번 생각할 겁니다 생산 되었습니까?
일을 :-) – Martijn