JS for 루프에서 setTimeout을 사용하는 4가지 솔루션

개요

먼저 setTimeout 타이머의 운행 메커니즘을 간단히 알아보겠습니다.setTimeout은 먼저 리셋 함수를 대기 대기열에 넣고, 대기 구역 내의 다른 메인 프로그램이 실행된 후, 시간 순서에 따라 먼저 리셋 함수를 실행합니다.본질적으로 작용역의 문제다.
따라서 이렇게 하면 원하는 결과를 얻지 못하고 1, 2, 3, 4, 5를 연속으로 출력한다.

for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
     }, i*1000 );
}

이것은 set Timeout이 비동기적으로 실행되기 때문입니다. for 순환할 때마다 set Timeout은 한 번씩 실행되지만 함수는 실행되지 않고 작업 대기열에 놓여 실행을 기다리고 있습니다.메인 라인의 작업이 끝나야만 작업 대기열의 작업을 수행할 수 있습니다.즉, for 순환이 모두 실행된 후에fun 함수를 실행할 수 있지만, for 순환이 끝난 후에 i의 값은 6으로 바뀌었기 때문에 타이머가 5초 동안 뛰었지만 컨트롤러의 내용은 여전히 6이다.
(주의: for순환은 시작부터 끝까지 몇 마이크로초 또는 몇 밀리초를 유지해야 하며, 타이머가 1초를 뛰고 나면 for순환은 이미 끝났다.)
우리는 또 다른 상황을 보았다.

for (var i=1; i<=5; i++) {
    (function() {
        setTimeout( function timer() {
            console.log( i );
        }, i*1000 );
    })();
}

set Timeout의 운영 메커니즘을 통해 알 수 있듯이 먼저 외부의 모든 메인 프로그램을 실행합니다. for 순환 내에 패키지가 형성되었지만 fun은 실삼을 발견하지 못했기 때문에 첫 번째 예와 실제적인 차이가 없고 5개 6을 연속으로 출력합니다.

솔루션 1: 패키지 닫기

클립을 사용하는 것은 매우 고전적인 방법이다.

for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })(i);
}

우리는 실제 파라미터가 타이머 내부의 i와 강한 의존이 있기 때문에 예상 결과와 일치하고 순서대로 1~5를 출력하는 것을 발견할 수 있다.
패키지를 닫아서 i의 변수를 메모리에 저장합니다. j를 출력할 때 외부 함수의 변수 값 i를 인용하고 i의 값은 순환에 따라 지정됩니다. setTimeout을 실행할 때 출력을 확정했습니다.

솔루션 2: 패브릭 분리

또한 setTimeout의 정의와 호출을 각각 다른 부분에 넣을 수 있습니다.

function timer(i) {
    setTimeout( console.log( i ), i*1000 );
}
for (var i=1; i<=5;i++) {
    timer(i);
}

콘솔의 출력은 여전히 순서대로 1부터 5까지 출력된다.

솔루션 3:let

이 문제를 해결하기 위해 es6의 let을 사용합니다.

for (let i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
     }, i*1000 );
}

이 예는 첫 번째에 비해 var를let으로 바꿨지만 컨트롤러의 결과는 순서대로 1부터 5까지 출력되었다.
for 순환 헤드의 let은 i를 for 순환에 연결할 뿐만 아니라, 사실상 순환체의 매번 교체에 다시 연결하여 지난번 교체가 끝난 값이 다시 부여되는 것을 확보하기 때문이다.setTimeout 안의 function () 은 새로운 영역에 속합니다. var를 통해 정의된 변수는 이 함수 실행 영역에 전송할 수 없습니다. let을 사용하여 블록 변수가 이 블록에 작용할 수 있음을 설명하기 때문에 function은 i라는 변수를 사용할 수 있습니다.이 익명 함수의 매개 변수 작용역은 for 매개 변수의 작용역과 다르기 때문에 이 점을 이용하여 완성한 것이다.이 익명 함수의 작용역은 약간 유사한 속성을 가지고 있어 내층적인 방법으로 사용할 수 있다.

솔루션 4: setTimeout 세 번째 매개변수

for (let i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
     }, i*1000, i );
}

매번 전송되는 매개 변수는 for 순환에서 가져온 값이기 때문에 순서대로 1부터 5까지 출력됩니다.
이상은 JS가 for 순환에서 setTimeout을 사용하는 네 가지 해결 방안에 대한 상세한 내용입니다. JS가 setTimeout을 사용하는 것에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!