JavaScript 타이머에 대한 자세한 설명

이번에는 JavaScript 의 타이머 에 대해 자세히 설명하고, JavaScript 타이머 사용 시 주의사항 은 무엇인지 살펴보겠습니다.

비동기 작업을 위한

events를 배치하는 것 외에도 "Task Queue"는 시간 제한 이벤트를 배치할 수도 있습니다. 즉, 일부 코드가 실행될 시간을 지정하는 것입니다. 이것을 "timer"(타이머) 함수라고 하는데, 정기적으로 실행되는 코드입니다.

타이머 함수는 주로 두 가지

함수setTimeout()과 setInterval()에 의해 완성됩니다. 두 함수의 내부 작동 메커니즘은 전자가 지정한 코드가 한 번 실행되는 반면 후자는 실행된다는 점만 다릅니다. 자꾸. 다음에서는 주로 setTimeout()에 대해 설명합니다.

setTimeout()은 두 개의 매개 변수를 허용합니다. 첫 번째는

콜백 함수이고 두 번째는 실행을 지연하는 밀리초 수입니다.

console.log(1);setTimeout(function(){console.log(2);},1000);console.log(3);

위 코드의 실행 결과는 1, 3, 2입니다. setTimeout()은 1000밀리초 이후까지 두 번째 줄의 실행을 연기합니다.

setTimeout()의 두 번째 매개변수를 0으로 설정하면 현재 코드가 실행된 후(실행 스택이 지워짐) 지정된 콜백 함수가 즉시(0밀리초 간격) 실행된다는 의미입니다.

setTimeout(function(){console.log(1);}, 0);console.log(2);

위 코드의 실행 결과는 두 번째 줄만 실행되기 때문에 항상 2, 1이 됩니다. , 시스템은 "작업 대기열"에서 콜백 기능을 실행합니다.

간단히 말하면, setTimeout(fn,0)의 의미는 메인 스레드의 가능한 가장 이른 유휴 시간에 실행될 작업, 즉 최대한 빨리 실행되도록 지정하는 것입니다. "작업 대기열" 끝에 이벤트를 추가하므로 동기화 작업과 "작업 대기열"의 기존 이벤트가 처리될 때까지 실행되지 않습니다.

HTML5 표준에서는 setTimeout()의 두 번째 매개변수의 최소값(최단 간격)이 4밀리초 이상이어야 한다고 규정하고 있습니다. 이 값보다 작으면 자동으로 증가합니다. 그 전에는 이전 브라우저에서 최소 간격을 10밀리초로 설정했습니다. 또한 이러한 DOM 변경(특히 페이지 재렌더링과 관련된 변경)은 일반적으로 즉시 실행되지 않고 16밀리초마다 실행됩니다. 이때 setTimeout()보다 requestAnimationFrame()을 사용하는 것이 효과가 더 좋습니다.

setTimeout()은 이벤트를 "작업 대기열"에만 삽입한다는 점에 유의해야 합니다. 메인 스레드는 지정된 콜백 함수를 실행하기 전에 현재 코드(실행 스택)가 완료될 때까지 기다려야 합니다. 현재 코드가 오래 걸리면 시간이 오래 걸릴 수 있으므로 setTimeout()에서 지정한 시간에 콜백 함수가 실행된다는 보장은 없습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트

기타 관련 기사를 주목하세요!

추천 자료:

JavaScript 실행 메커니즘의 이벤트 루프

JavaScript 실행 메커니즘의 이벤트 및 콜백 함수

JavaScript 실행 메커니즘의 작업 대기열

위 내용은 JavaScript 타이머에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!