setTimeout 및 setInterval_javascript 기술에 대한 간략한 토론

최신 코드를 작성할 때 프로젝트에서 setTimeout(fun,0)을 사용하는 사람을 본 적이 있어서 요약해 보고자 합니다. 개인적인 이해이니, 틀린 부분이 있으면 지적 부탁드립니다. 감사합니다

JavaScript 타이머의 작동 방식을 이해하려면 먼저 JavaScript 엔진이 단일 스레드라는 점을 이해해야 합니다. 이는 JavaScript 엔진이 서비스 대기열을 가지고 있다는 것으로 이해될 수 있습니다. 모든 인터페이스 요소 이벤트, 예약된 트리거 콜백 및 비동기 요청 콜백이 이 작업 대기열에 대기하며 처리를 기다리고 있습니다. 모든 작업은 최소한의 단위이며 처리를 방해하지 않습니다. 이렇게 하면 setTimeout(fun,0)을 이해할 수 있습니다. 작업 대기열이 비어 있지 않으면 코드가 즉시 실행된다는 의미는 아닙니다(사실 브라우저마다 실제로 이를 실행하는 방식에는 차이가 있습니다. 최신 브라우저에서는 실제로 그렇습니다. 4ms일 수 있습니다. 이전 버전은 더 길 수도 있고 16ms도 가능합니다. 그리고 setTimeout(fun, time)은 이 작업 대기열에 fun 콜백을 추가하는 데 걸리는 시간, 즉 fun을 실행하는 데 최소한의 시간이 걸리는 것을 의미합니다.

예:

setTimeout(function () {
 console.log(1);
}, 0);
var tem = 0;
for (var i = 1; i < 1000000; i++) {
 tem += i;
};
console.log(2);

결과를 다음과 같이 표시합니다.

코드 복사 코드는 다음과 같습니다.

2
1

즉, setTimeout을 실행하면 함수 콜백이 작업 대기열에 추가되지만 js 엔진이 여전히 현재 js를 처리하느라 바빠서 즉시 실행되지 않고 이 코드 이후에만 작업 목록으로 이동합니다. 세그먼트가 실행되어 새 작업을 가져오므로 결과는 먼저 2를 표시한 다음 1을 표시합니다.

setInterval(fun, time) 메소드는 일정 간격으로 큐에 fun을 추가하는 것입니다. 그렇다면 fun의 실행 시간이 시간보다 길면 어떻게 될까요?

코드 보기

var num = 0;
var time = setInterval(function () {
 var tem = 0;
 for (var i = 1; i < 99999999; i++) {
 tem += i;
 };
 num ++;
 console.log(num);
}, 100);

setTimeout(function (){
 clearInterval(time);
}, 1000);

100ms마다 코드를 실행하고 1초 후에 타이머를 지우는 것을 의미합니다. 하지만 결과는 어떻습니까?

결과는

로 표시됩니다.

코드 복사 코드는 다음과 같습니다.

1
2
3

즉, 실제로 그렇게 많이 실행되지는 않았습니다. 즉, 일부 간격을 건너뛰므로 여러 코드 실행 사이의 간격이 예상보다 작을 수 있습니다. 타이머 코드가 대기열에 추가될 때 타이머 코드 인스턴스가 존재하면 타이머 코드를 건너뛰는 것으로 나타났습니다.

사진을 인용하시면 이해가 쉽습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.