자바스크립트 타이머의 작동 원리

태그(공백으로 구분): 자바스크립트 타이머

최근에 ajax의 원리를 보다가 자바스크립트 타이머의 작동 원리를 설명하는 외국 글을 보았는데 도움이 되었습니다. 나는 js의 단일 스레드 작업 모드를 아주 잘 이해합니다. 참조용으로 여기에서 번역하세요.
번역 텍스트
기본적으로 JavaScript 타이머의 작동 방식을 이해하는 것은 매우 중요합니다. 일반적으로 js는 단일 스레드에서 작동합니다. 먼저 타이머를 구성하고 작동할 수 있는 세 가지 함수를 살펴보겠습니다.

 - 启动单个定时器，在延迟后调用指定的功能。该函数返回一个唯一的ID，该Id可以用于取消定时器    var id = setTimeout(fn, delay); 
 - 类似setTimeout但不断地调用函数（每次都有延迟），直到它被取消，类似于定时任务。同上也返回唯一ID用于取消定时器    var id = setInterval(fn, delay); 
 - 接受计时器ID（由上述任一功能返回）并停止触发计时器回调。
    clearInterval(id);
    clearTimeout(id);

로그인 후 복사

타이머의 내부 작동을 이해하려면 중요한 개념을 탐구해야 합니다. 즉, 타이머 지연이 정확하다고 보장되지는 않습니다. 브라우저의 모든 JavaScript는 단일 스레드에서 실행되므로 비동기 이벤트(예: 마우스 클릭 및 타이머)는 실행될 수 있는 경우에만 실행됩니다. 이는 아래와 같이 다이어그램을 사용하여 가장 잘 설명됩니다.

JavaScript 타이머 작동 방식에 대한 자세한 소개

이 다이어그램에는 이해해야 할 많은 정보가 있으며, 이를 완전히 이해하면 비동기 JavaScript 실행이 어떻게 작동하는지 더 잘 이해할 수 있습니다. 이 그래프는 1차원적입니다. 세로로 밀리초 단위로 측정된 (벽시계) 시간(왼쪽의 시간 척도)이 있습니다. 파란색 상자는 실행 중인 JavaScript 부분을 나타냅니다. 예를 들어 첫 번째 JavaScript 블록을 실행하는 데 약 18ms가 걸리고 블록을 마우스로 클릭하는 데 약 11ms가 걸리는 식입니다.

JavaScript는 단일 스레드 특성으로 인해 한 번에 하나의 코드만 실행할 수 있으므로 각 코드 블록은 다른 비동기 이벤트의 진행을 "차단"합니다. 즉, 비동기 이벤트(마우스 클릭, 타이머 실행 또는 XMLHttpRequest 완료 등)가 발생하면 나중에 실행하기 위해 대기열에 추가됩니다(이 대기열이 실제로 발생하는 방식은 브라우저에 따라 다름). 브라우저는 다양합니다. 여기에 간단한 설명이 있습니다. 설명).

먼저 JavaScript의 첫 번째 블록에서 두 개의 타이머(10ms setTimeout 및 10ms setInterval)를 시작합니다. 타이머가 시작되는 위치와 시간 때문에 실제로 첫 번째 코드 블록을 완료하기 전에 타이머가 실제로 실행됩니다. 그러나 즉시 실행되지는 않지만(스레드 때문에 이를 수행할 수 없음) 다음 사용 가능한 순간에 실행되도록 대기열에 대기됩니다.

또한 첫 번째 JavaScript 블록에서는 마우스 클릭이 보입니다. 마우스 클릭 이벤트(사용자가 언제 작업을 수행하는지 알 수 없으므로 비동기식으로 간주됨)와 관련된 JavaScript 콜백은 즉시 실행될 수 없으므로 초기 타이머와 마찬가지로 나중에 실행되도록 대기열에 추가됩니다.

JavaScript의 초기 블록이 완료된 직후 실행 브라우저는 다음과 같이 묻습니다. 대기열에 실행 대기 중인 작업은 무엇입니까? 이 경우 마우스 클릭 핸들러와 타이머 콜백이 모두 대기 중입니다. 그런 다음 브라우저는 하나를 선택하고(마우스 클릭 콜백) 즉시 실행합니다. 타이머는 다음에 실행을 위해 대기열에서 꺼낼 때까지 기다립니다.

마우스 클릭 핸들러가 실행되면 첫 번째 간격 콜백이 실행된다는 점에 유의하세요. 타이머와 마찬가지로 해당 핸들러는 나중에 실행하기 위해 대기열에 들어갑니다. 다만, 인터벌이 다시 발동되면(타이머 프로그램 실행시) Interval의 인터벌 콜백은 폐기되니 주의하시기 바랍니다. 이미 대기 중인 간격이 있기 때문입니다. 큰 코드 덩어리를 실행하는 동안 간격 콜백을 호출하려는 경우 간격 콜백은 지연 없이 작업 대기열에 연속적으로 추가됩니다. 브라우저는 대기열에 다른 작업이 없을 때까지 단순히 대기열로 이동하여 작업을 가져오는 경우가 많습니다.

실제로 간격 자체가 실행되는 동안 세 번째 간격 콜백이 실행되는 것을 볼 수 있습니다. 이는 중요한 사실을 보여줍니다. 간격은 현재 실행 중인 내용에 상관없이 무차별적으로 대기열에 추가됩니다.

마지막으로 두 번째 간격 콜백 실행이 완료된 후 JavaScript 엔진에 수행할 작업이 없음을 확인할 수 있습니다. 이는 브라우저가 이제 새로운 비동기 이벤트가 발생하기를 기다리고 있음을 의미합니다. 간격이 다시 실행되면 50ms 위치에 있습니다. 그러나 이번에는 프로그램이 실행되지 않으므로 즉시 실행됩니다.

setTimeout과 setInterval의 차이점을 더 잘 설명하기 위해 예를 살펴보겠습니다.

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

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

로그인 후 복사

이 두 코드는 언뜻 보면 기능적으로 동일해 보일 수 있지만 그렇지 않습니다. setTimeout 코드는 이전 콜백 실행 후 항상 최소 10ms의 지연을 갖는 반면(결국 10ms 이상일 수 있음) setInterval은 이 긴 코드 실행 중에 매번 시도한다는 점에 주목할 가치가 있습니다. 10ms마다(번역자 주: 이 긴 코드를 실행하는 동안 간격 없이 10ms마다 작업이 대기열에 추가된다는 점을 이해할 수 있습니다.)

여기서 많은 것을 배웠습니다. 복습해 보겠습니다.

JavaScript 엔진에는 스레드가 하나만 있으므로 비동기 이벤트가 실행 대기열에 추가됩니다.
setTimeout과 setInterval은 비동기 코드를 실행하는 방식이 근본적으로 다릅니다.
타이머가 즉시 실행되지 않도록 차단되면 다음 가능한 실행 지점까지 지연됩니다(필요한 지연을 초과함).
setInterval에 포함된 콜백 프로그램의 실행 시간이 충분히 길면(지정된 지연 시간 초과) 해당 간격은 지연 없이 실행될 수 있습니다. (역자 주: 하나의 콜백 실행이 완료되지 않으면 다른 콜백이 추가되기 때문입니다.)
이 모든 것은 JavaScript 엔진의 작동 방식, 특히 발생하는 수많은 비동기 이벤트를 이해하고 고급 애플리케이션 코드를 구축하기 위한 기반을 마련하는 데 매우 중요한 지식입니다.