JavaScript 타이머 작동 방식

다음 내용을 읽기 전에 코드의 작은 부분을 읽어보세요. 독자가 코드의 목적을 알 수 있다면 이해하게 될 것이므로 더 이상 읽을 필요는 없습니다.

setTimeout(function(){
/* Some long block of code… */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/* Some long block of code… */
}, 10);

타이머는 매우 멋진 기능이지만 많은 사람들이 타이머의 구문만 알고 원리에 대한 이해가 부족합니다. 타이머는 특정 기간(밀리초)을 설정하여 코드 조각을 비동기적으로 실행합니다. Javascript는 단일 스레드 언어이기 때문에 타이머는 이러한 언어 제한에 대해 코드를 실행할 수 있는 기능을 제공합니다.

오늘은 타이머 작동 원리를 간략하게 설명드리겠습니다.

3clearInterval(id);clearTimeout(id);

구체적인 구문에 대해서는 자세히 설명하지 않으므로 설명서를 확인하세요. 타이머 작동 방식을 이해하려면 한 가지 개념을 염두에 두어야 합니다. 즉, 시간 지연이 보장되지는 않습니다. 무슨 뜻인가요? 이렇게 setTimeout(fn, 500)을 작성한다고 해서 fn이 반드시 500밀리초 후에 즉시 실행된다는 의미는 아닙니다. JavaScript는 단일 스레드 언어이기 때문에 모든 비동기 이벤트(타이머, 마우스 이벤트 또는 XMLHttpRequest 완료 포함)는 프로그램 실행 중 공백이 있을 때만 실행된다는 의미는 아닙니다. 프로그램을 알아야 합니다. 사용자는 전능하지 않으며, 작성하는 내용은 궁극적으로 브라우저에 따라 달라집니다.

아래 그림은 마스터 John Resig 덕분에 문제를 잘 설명할 수 있습니다.

위에서 아래로 보면 왼쪽의 숫자는 시간(밀리초)을 나타내고 오른쪽의 텍스트는 일련의 비동기 이벤트의 설정 및 트리거를 나타냅니다. 중간에 코드 블록이 있습니다. 상단 JavaScript 코드 블록은 브라우저가 로드될 때 실행되는 조각일 수 있으며, 이는 약 18밀리초가 소요됩니다. 바로 아래의 마우스 클릭 콜백 코드 블록은 마우스 이벤트가 트리거될 때의 콜백 함수일 수 있으며, 이는 약 11밀리초가 소요됩니다. , 등등.

JavaScript의 단일 스레드 특성으로 인해 한 번에 하나의 블록만 실행될 수 있으므로 첫 번째 코드 블록이 실행될 때(총 18밀리초 동안 실행됨) 타이머 2개를 생성합니다. 그 동안 사용자는 여전히 마우스를 클릭할 수 있습니다(로드가 완료되기 전에 웹 페이지가 열리자마자 클릭한 적이 있습니까?). 사용자가 마우스를 클릭한 후 즉시 콜백 함수가 실행되어야 하는 것은 당연한 일이지만, 그렇지 않습니다. JavaScript 실행을 위한 레인은 단 하나뿐입니다. 18밀리초가 완료되기 전에 다른 코드 블록은 원하는 경우에만 대기열에 추가될 수 있습니다. 처형되어 추월할 여지가 없습니다. 두 타이머 모두 10밀리초의 지연이 있습니다. 그림에서 볼 수 있듯이 setTimeout도 18밀리초 실행이 끝나기 전에 트리거됩니다.

드디어 18밀리초 후, 하늘에서 천둥소리가 들려 앞의 차를 공중으로 쪼개어 줄을 서 있던 두 사람이 지나갈 수 있었지만, 한 명씩 가야 했기 때문에 그럴 수 없었다. 그럼 누가 먼저 지나갈까요? 거기에서 두 사람이 서로 주먹질을 하고 있나요? 아니요, 최종 결정권은 브라우저에 있습니다. 브라우저는 마우스 클릭 이벤트가 먼저 통과하고 setTimeout은 11밀리초 동안만 계속 기다릴 수 있다고 말합니다. 그림에 주의하세요. 마우스 이벤트 콜백 함수가 실행되면 또 다른 타이머 이벤트가 트리거되어(setInterval) 대기하고 있으며 setTimeout보다 순위가 높아야 합니다.

11밀리초가 지났고 setTimeout이 마침내 통과되었습니다. 처음에는 대기열에 있었지만 setInterval이 두 번째로 트리거되었습니다. 이번에도 평소처럼 대기열에 있으면 어떻게 될까요? 이 경우 setTimeout이 실행된 후 두 개의 setInterval이 연속적으로 실행되므로 설정한 지연은 쓸모가 없게 됩니다. 따라서 브라우저는 매우 똑똑합니다. setInterval을 처리할 때 이미 대기 중인 항목이 있는 것을 발견하면 새 항목을 직접 종료합니다.

다음에는 대기열에 있는 setInterval의 차례가 실행됩니다. 이번에는 대기열에 있지 않으므로 브라우저가 이를 종료하지 않습니다. 대기할 가능성이 있으므로 이 두 setInterval의 실행 사이에 간격이 없다는 것을 알게 될 것입니다.슬라이드쇼를 만드는 경우 이러한 상황이 발생하면 코드에 문제가 있는지 신중하게 생각해야 합니다.

마지막으로 setInterval을 방해하는 다른 요인은 없으며(사용자가 MM에 의해 호출되는 경우) setInterval은 원하는 단계에 따라 실행됩니다.

이쯤 되면 시작 부분의 코드를 이해할 수 있습니다.

이 두 함수는 동일한 효과를 갖는 것처럼 보이지만 그렇지 않습니다. 첫 번째 코드 블록은 항상 10밀리초의 지연으로 실행되지만 대부분의 경우 10밀리초보다 깁니다. . 두 번째 트리거는 이전 트리거가 실행되었는지 여부에 관계없이 10밀리초마다 실행을 시도합니다.

네 가지 사항을 요약하면

• JavaScript 엔진에는 스레드가 하나만 있어서 특정 비동기 이벤트가 대기열에 추가됩니다.

setTimeout(function(){
/* Some long block of code… */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/* Some long block of code… */
}, 10);

• setTimeout과 setInterval 간에는 큰 차이가 있습니다. 비동기 코드를 실행할 때

• 타이머 실행이 차단되면 코드 실행 간격이 발생할 때까지 기다리며 일반적으로 예상보다 오래 걸립니다.

• 다음과 같은 경우 간격이 차례로 실행될 수 있습니다. 콜백 함수 실행 시간이

간격보다 깁니다.