질문
비동기 루프를 구현할 때 문제가 발생할 수 있습니다.
루프에서 루프의 인덱스 값을 한 번만 인쇄하는 비동기 메서드를 작성해 보겠습니다.
<script>
for(var i = 0; i < 5; i++){
setTimeout(function(){
document.writeln(i);document.writeln("<br />");
},1000);
}
</script>위 프로그램의 출력은 다음과 같습니다.
5
5
5
5
5
이유
모든 타임아웃(timeout)은 복사본이 아닌 원본 i를 가리킵니다. 따라서 for 루프는 i를 5로 증가시킨 다음 timeout이 실행되고 i의 현재 값(5)을 호출합니다.
솔루션
i를 복사하는 방법에는 여러 가지가 있습니다. 가장 일반적이고 일반적으로 사용되는 방법은 함수를 선언하고 이 함수에 i를 전달하여 클로저를 생성하는 것입니다. 여기서는 자체 호출 기능을 사용합니다.
코드 실행
<script>
for(var i = 0; i < 5; i++){
(function(num){
setTimeout(function(){
document.writeln(num);document.writeln("<br />");
},1000);
})(i);
}
</script>출력
0
1
2
3
4
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
