javascript - setInterval 실행 메커니즘 정보

Question

//업데이트: 이 질문은 참조할 가치가 없으며 다소 혼란스럽습니다. 자세한 내용은 아래 답변을 참조하세요

이틀 전에 언급한 블로그를 봤습니다. setInterval 콜백 함수의 실행 시간이 지정된 지연 시간보다 길면 타이머가 트리거될 때 작업 대기열에 동일한 타이머에 대한 콜백 함수가 있으면 이 콜백은 무시됩니다. 이는 작업 대기열에 동일한 타이머의 콜백 함수가 두 개 이상 없다는 의미입니다. 설명이 불분명합니다. 코드를 살펴보세요.

예 1

으아아아

setInterval은 100ms마다 작업 대기열에 함수를 추가하고, setInterval은 1000ms 후에 지워집니다. 위의 설명에 따라 이 결과를 설명하세요.

1. 첫 번째 for 루프를 100ms에 작업 대기열에 넣으면 유휴 메인 스레드가 이 루프를 실행하기 시작합니다. 이 루프는 863ms가 걸립니다.

첫 번째 for 루프가 실행되는 동안 두 번째 타이머는 200ms에 트리거되고 두 번째 for 루프는 964ms 후에 메인 스레드가 유휴 상태가 되어 두 번째 for 루프 실행을 시작할 때까지 빈 작업 대기열에 배치됩니다.

2. 타이머(이론적 시퀀스 번호)가 세 번째부터 여덟 번째까지 트리거되면 메인 스레드가 첫 번째 for 루프를 실행하고 작업 대기열에 두 번째 for 루프가 있으므로 이러한 함수는 무시되고 작업은

입력되지 않았습니다.

3. 900ms에 9번째 타이머가 트리거되고 메인 스레드가 두 번째 for 루프를 실행합니다. 이 타이머의 기능은 작업 대기열에 존재하지 않으므로 이 타이머의 기능은 작업 대기열에 들어갑니다. 결과.

4. 1000ms가 되면 10번째 타이머가 트리거되지만, 세 번째 타이머와 같은 이유로 무시되고 이후 setInterval이 지워집니다.

5. 예 2

그런데 또 다른 예시 테스트 결과는 이렇지 않네요

으아아아

브라우저는 먼저 for 루프를 실행하는데 내 컴퓨터에서는 약 13초가 걸렸습니다(컴퓨터가 너무 나빠요...). 위의 설명에 따르면 이 13초 동안 타이머의 기능은 하나만 실행됩니다. 그러면 실행 결과는 13초 후에 동시에 13개의 "타이머"를 인쇄한 다음 1초 내에 해당 기능을 실행하는 것입니다.

질문

위의 두 가지 예는 충돌합니다. 이 경우 setInterval은 어떻게 작동합니까? 가급적이면 권위 있는 정보를 바탕으로 명확한 답변을 드릴 수 있기를 바랍니다. 고마워요 다카르.

Answer 1

이 질문을 했는데 이제 조금 혼란스럽다는 것을 깨달았습니다. . .
두 번째 예에서는 for 루프 실행 중에 js 스레드가 점유되어 다음 명령문이 구문 분석되지 않았습니다. 즉, 타이머가 등록되지 않았습니다. 예제를 수정하고 실행 시간을 추가하세요:

으아악

이 예제를 테스트에 사용하면 명확해질 것입니다. 위의 for 루프는 약 1544ms 동안 실행되었습니다. 이때 js 스레드가 해당 구문을 구문 분석하고 타이머가 등록된 후 정상적으로 실행되었습니다.

따라서 두 예제 사이에는 충돌이 없습니다. 첫 번째 예제가 정확합니다. 기본 스레드가 타이머 기능을 실행하고 작업 대기열에 동일한 타이머 기능이 있으면 이 기간 동안 모든 타이머 트리거가 발생합니다.

Answer 2

그러나 setInterval의 예제 2는 종료되기 전에 실행되지 않았습니다