웹
반복문 안에 비동기 함수
ferretsecu
2017. 12. 12. 01:54
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function foo(){
for(var i = 0; i < 10; i++){
setTimeout(function(){
$( ".test" ).append( "<p>" + i + "</p>" );
}, 500);
}
}
</script>
</head>
<body>
<div class="test">
<input type="button" onclick="foo()" value="test" />
</div>
</body>
</html>자바스크립트로 크롬 익스텐션을 만들어야 했었던 적이 있었는데, 가장 어려웠던게 비동기 함수였다. 평소에 동기와 비동기를 고려할 필요 없이 프로그래밍 했었는데 자바스크립트나 혹은 크롬 익스텐션 API에서 상당히 많은 함수가 비동기 함수였다. 반복문 안에서 비동기 함수를 호출해야 했던적이 있었는데 생각과는 다른 값이 리턴되는 경우가 있었다. 바로 위와 같은 코드의 경우다.
함수 foo에 반복문 안에 대표적인 비동기 함수 setTimeout이 있고 버튼을 클릭하면 foo함수가 실행되어 i 값이 10번 호출된다. 처음에 별 생각없이 0부터 9까지 차례대로 출력된다는 생각을 했었는데 실제로는 [그림 1]과 같이 나온다. 곰곰히 생각해보니 for문을 끝낸 i값을 출력해서 위와 같은 결과가 나온다고 생각했다.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function foo(){
for(var i = 0; i < 10; i++){
foo2(i);
}
}
function foo2(i){
setTimeout(function(){
$( ".test" ).append( "<p>" + i + "</p>" );
}, 500);
}
</script>
</head>
<body>
<div class="test">
<input type="button" onclick="foo()" value="test" />
</div>
</body>
</html>
그래서 위와 같이 코드를 바꿨다 setTimeout 함수를 foo2안에 넣고 foo에서 foo2를 호출하게 했다.
원래 생각한 것 처럼 [그림 2]와 같은 결과가 나온다. 실제로 업무에서 비동기 함수를 반복문에 두는 경우가 있는지는 잘 모르겠지만, 이런 저런 생각을 하게 되서 재밌었다.