Javascript 스레드 및 타이밍 메커니즘_javascript 기술에 대한 간략한 토론
- WBOY원래의
- 2016-05-16 15:51:57893검색
setTimeout 및 setInterval 사용
Javascript api 문서에 정의된 setTimeout과 setInterval의 두 번째 매개변수는 각각 콜백 함수가 실행된 후의 밀리초 수와 콜백 함수가 실행된 후의 밀리초 수를 의미합니다. 그러나 업무 경험이 쌓이면서 우리는 그렇지 않다는 것을 알게 되었습니다.
예를 들어
div.onclick=function(){
setTimeout(function(){
document.getElementById('input').focus();
},0);
}
설명할 수가 없어요. 그냥 바로 실행하세요. 왜 원을 그리며 돌도록 타이머를 설정해야 하나요?
또 다른 날 당신은 다음 코드를 작성했습니다
setTimeout(function(){while(true){}},100);
setTimeout(function(){alert('你好');},200);
첫 번째 코드 줄이 끝없이 반복되어 두 번째 경고 줄이 나타나지 않습니다. 이유는 무엇입니까?
단일 스레드인가요, 멀티 스레드인가요?
JavaScript 엔진은 단일 스레드에서 실행되고 브라우저에는 JavaScript 프로그램을 실행하는 스레드가 하나만 있는 것으로 나타났습니다. 단일 스레드 설계로 인해 복잡한 다중 스레드 동기화 문제가 제거되었습니다.
타이머를 설정하면 브라우저는 지정한 콜백 함수를 즉시 실행하지 않고 설정된 시간 이후에 작업 순서에 삽입합니다. 타이밍 시간이 0으로 설정되면 작업 순서가 즉시 실행되지 않고 즉시 삽입된다는 의미입니다. 대기열에 있는 작업이 실행될 때까지 기다려야 하며 작업을 실행하기 전에 차례가 됩니다.
따라서 다음 코드는 2를 먼저 표시한 다음 1을 표시합니다.
setTimeout(function(){
alert(1);
},0);
alert(2);
그렇다면 이것의 실제 용도는 무엇입니까? 아래 예시를 살펴보겠습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>setTimeout 0</title>
</head>
<body>
输入字符，但内容却不能实时显示<input type="text" onkeydown="show(this.value)"/> <br/>
输入字符，内容能实时显示<input type="text" onkeydown="var self=this;setTimeout(function(){show(self.value)},0)"/>
<div></div>
<script>
function show(val){
document.getElementsByTagName("div")[0].innerHTML=val;
}
</script>
</body>
</html>
이 예에서 js 엔진은 keydown 이벤트 핸들러를 실행한 다음 입력 상자의 값을 업데이트해야 합니다. 이벤트 핸들러가 실행되면 값을 업데이트하는 작업은 대기할 대기열에만 들어갈 수 있으므로 keydown 이벤트가 실행될 때 업데이트된 값을 얻을 수 없지만 setTimeout을 통해 값을 대기열에 가져오는 작업을 넣습니다. 값을 업데이트한 후 실행하면 내용이 실시간으로 표시됩니다.
돌아와서 다음 코드를 살펴보세요.
setTimeout(function(){
//do something...
setTimeout(arguments.callee,10);
},10);
setInterval(function(){
//do something...
},10);
이 두 코드는 동일한 효과를 갖는 것처럼 보이죠? 실제로는 차이가 있는데, 첫 번째 문단의 콜백 함수에 있는 setTimeout은 js 엔진이 실행된 후 설정된 새로운 타이밍으로, 이전 콜백 완료부터 시작까지의 시간 간격이 있다고 가정합니다. 다음 콜백. 이론적으로 시간 간격 > ;=10ms, 다음 코드는
그런데 XMLHttpRequest는 정말 비동기식인가요? 예, 요청은 비동기식이지만 이 요청은 브라우저에서 열리는 새 스레드입니다. 요청된 상태가 변경될 때 콜백이 이전에 설정된 경우 비동기 스레드는 상태 변경 이벤트를 js 엔진 처리 대기열에 넣어 작업이 처리될 때까지 대기합니다. js 엔진은 항상 다음에서 설정된 기능을 실행합니다. 단일 스레드의 onreadystatechange.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.