> 웹 프론트엔드 > JS 튜토리얼 > js의 setTimeout() 함수

js의 setTimeout() 함수

一个新手
풀어 주다: 2017-09-21 09:45:41
원래의
2538명이 탐색했습니다.

js에서 setTimeout() 함수는 어디에 있든 로컬 변수가 아닌 전역 변수입니다. 따라서 다음 예제의 결과는 여러분을 놀라게 할 수 있습니다.

function A() {
    this.b = function() {
        console.log(1)
    }
}
var c = new A()
setTimeout(c.b, 10)
로그인 후 복사

일부 사람들은 위 예제의 출력 결과가 1이라고 생각할 수 있지만 결과는 정의되지 않습니다. 이는 setTImeout() 함수가 전역 변수이기 때문입니다. 그러나 전역 변수에는 b 속성이 없으므로 unundefined를 반환합니다.

js에서 setTimeout() 함수의 작동 메커니즘은 이와 같으며, setInterval() 함수도 마찬가지입니다. 지정된 코드를 이 실행 밖으로 이동하고 이벤트 루프의 다음 라운드까지 기다린 후 지정된 시간이 도달했는지 확인합니다. 도착하면 해당 코드가 실행되고, 도착하지 않으면 다음 이벤트 루프까지 재심사됩니다. 이는 이번에 실행된 코드가 모두 실행될 때까지 setTimeout에 지정된 코드가 실행되지 않음을 의미합니다.

이벤트 LOOP의 모든 라운드는 "작업 대기열"에서 수행되어야 하는 작업을 수행합니다. setTimeout과 setInterval은 모두 "작업 대기열"의 끝에 작업을 추가합니다. 그러므로 그들은 실제로 현재 스크립트의 모든 동기화 작업이 실행될 때까지 기다려야 하며, 그런 다음 이 이벤트 루프의 "작업 대기열"의 모든 작업이 실행을 시작하기 전에 실행될 때까지 기다려야 합니다. 이전 작업을 완료하는 데 시간이 얼마나 걸릴지 알 수 없으므로 setTimeout 및 setInterval에 지정된 작업이 예정된 시간에 따라 실행된다는 보장은 없습니다.

따라서 이전 기능이 차단된 경우 해당 기능이 실행될 때까지 기다린 후 실행됩니다. js는 단일 스레드이므로 차단하기가 더 쉽습니다.

setTimeout() 함수에서 가장 빠른 실행 시간은 4ms입니다. Delay 매개변수를 0이나 음수로 써도 바로 실행되지는 않습니다. 지연 매개변수가 0 또는 음수인 경우 실행을 시작하기 전에 현재 단계의 동기화 태스크 및 이벤트 루프(즉, 태스크 큐)가 실행될 때까지 기다려야 합니다. 다른 setTimeout() 함수보다 최대한 빨리 실행하고 매개변수가 0이거나 음수 자체가 동일한 우선순위를 갖습니다. 예:

setTimeout('console.log(1)',0)
console.log(2)
로그인 후 복사

        반환된 결과는 2 1

setTimeout('console.log(1)',0)
setTimeout('console.log(2)',-1)
setTimeout('console.log(3)',-1)
setTimeout('console.log(4)',0)
로그인 후 복사

          반환된 결과는 1 2 3 4

                                               >                  ,       안으로,                     안으로,  즉, 첫 번째 매개변수는 컴파일해야 하는 코드이거나 함수 메서드여야 합니다. 따라서 위의 예에서 console.log()는 작은따옴표로 묶여 문자열이 됩니다. setTimeout에는 문자열을 컴파일하는 eval() 함수가 있습니다. console.log() 메서드를 작은따옴표로 묶지 않으면 지연 매개변수가 있는지 여부에 관계없이 전체 setTimeout() 함수가 즉시 실행됩니다. Midea의 Meiyun Smart Number 인터뷰에서 본 질문과 같습니다.

console.log(1)

setTimeout(console.log(2),0)
  
console.log(3)
  
setTimeout(console.log(4),-1)
로그인 후 복사

                                                                                     >                           setTimeout을 지우고 싶은 경우 타이머를 사용하려면clearTimeout() 함수가 필요합니다. 구체적인 사용법은 다음과 같습니다.

var a = setTimeout('console.log(1)', 1)
clearTimeout(a)
로그인 후 복사

마지막으로 졸업했는지 확인하기 위해 질문을 게시했습니다. 위의 출력을 보려면 다음 세 가지 코드를 비교하세요.

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
    console.log(i);
}
로그인 후 복사
for (var i = 0; i < 3; i++) {
    setTimeout((function() {
        console.log(i);
    })(i), 0);
    console.log(i);
}
로그인 후 복사
for (var i = 0; i < 3; i++) {
    setTimeout((function(i) {
        return function() {
            console.log(i);
        };
    })(i), 0);
    console.log(i);  
}
로그인 후 복사

이 질문은 일부 js 범위 문제를 설계합니다. es5의 범위와 es6의 범위 변경 사항을 소개하는 기사를 작성하세요.

위 내용은 js의 setTimeout() 함수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿