SetTimeout에는 실제로 세 번째 매개변수가 있습니까?

setTimeout에 실제로 세 번째 매개변수가 있나요?

setTimeout에 대해 말하자면, 모두가 익숙하고 사용법도 매우 간단합니다: setTimeout(fun, Delay).

하지만 믿기지 않으실 수도 있겠지만, 오랫동안 사용되어 온 setTimeout에는 실제로 세 번째 매개변수가 있습니다. setTimeout의 세 번째 매개변수를 살펴보겠습니다.

[관련 강좌 추천 : JavaScript 영상 튜토리얼]

먼저 간단한 코드를 살펴보겠습니다.

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

콘솔 출력이 1인데 계속해서 매개변수를 추가해도 될까요? 다음 코드를 계속 살펴보겠습니다.

setTimeout(function(x,y) {
    console.log(x+y);
}, 1000, 1, 2);

콘솔 출력은 3입니다. 이는 분명히 세 번째와 네 번째 매개변수의 합입니다.

이것을 보고 많은 친구들은 setTimeout의 세 번째 매개변수가 setTimeout의 첫 번째 함수의 매개변수라는 것을 깨닫게 될 것입니다.

MDN https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout을 쿼리하면 세 번째 매개변수에 대한 설명을 볼 수 있습니다.

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

따라서 정확하게 말하면 setTimeout은 다음을 가질 수 있습니다. 수많은 매개변수가 있지만 세 번째 매개변수부터는 선택 매개변수입니다.

이 기능을 알고 나면 어떤 문제를 해결할 수 있을까요? 가장 고전적인 방법은 for 루프 내에서 setTimeout을 사용하는 것입니다.

for(var i = 0; i<6; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

위의 예는 전형적인 인터뷰 질문입니다. setTimeout은 비동기 작업이고 setTimeout이 실행될 때 for 루프가 실행되었으며 이때 i는 이미 다음과 같습니다. 6이므로 6 곱하기 6이 출력됩니다. 나는 몇 가지 해결책을 요약했습니다. 관심 있는 친구들은 나의 마지막 블로그인 "for loops에서 setTimeout 사용에 대하여"를 읽을 수 있습니다. 이 블로그의 마지막 부분에서 setTimeout의 세 번째 매개변수 사용에 대해 언급했습니다.

for(var i=0;i<6;i++) {
    setTimeout(function(j) {
        console.log(j);
    }, 1000, i);
}

전달된 각 매개변수는 for 루프에서 가져온 값이므로 0~5가 순차적으로 출력됩니다. 물론 이것은 여전히 ​​범위 문제이지만 여기서는 setTimeout의 세 번째 매개변수가 i 값을 저장합니다. 이 솔루션은 클로저를 사용하는 것보다 훨씬 가볍습니다.

또한 세 번째 매개변수도 함수로 사용할 수 있습니다.

for(var i=0;i<6;i++) {

    setTimeout(function(j) {

        console.log(j);

    }, 1000, i);

}

최종 출력은 처음에는 0, 두 번째에는 1입니다.

세 번째 매개변수도 먼저 실행한 후 함수가 실행되는 것을 볼 수 있습니다.

마지막으로 세 번째 매개변수를 사용할 때 주의해야 할 점은 호환성 문제입니다. IE9 및 이전 버전과 호환되어야 한다면 MDN에서 제공하는 호환되는 이전 IE 코드를 도입해야 합니다 https ://developer.mozilla.org/zh-CN /docs/Web/API/Window/setTimeout#%E5%85%BC%E5%AE%B9%E6%97%A7%E7%8E%AF%E5% A2%83%EF%BC%88polyfill%EF% BC%89, 포털은 여기에 게시되어 있으니 관심이 있으시면 확인하실 수 있습니다.

다음은 MDN의 호환성에 대한 설명입니다.

Note: Passing additional arguments to the function in the first syntax does not work in Internet Explorer 9 and below. If you want to enable this functionality on that browser, you must use a polyfill (see the Polyfill section).

이 기사는 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 SetTimeout에는 실제로 세 번째 매개변수가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!