[JS] async/await을 이용한 setTimeout() 대하여... ( setTimeout함수 동기처리 )

 

예전에 setTimeout에 대한 글을 정리했으니, setTimeout의 기본문법에 대해 궁금한 사람은 (해당 링크) 확인

이번에 또 이렇게 글을 쓰게 된 건.. 이번에 async랑 await을 쓰면서 비동기 처리 함수를 동기처리 하는 걸

보고 있는데, 이 setTimeout()은 조금 다르게 동작하는 것 같아서 정리해본다..

 

아래 샘플코드는 내가 처음 await으로 setTimeout함수를 사용해보려고 했던 코드와 비슷하게 맞추었다.

 

샘플코드

<script>

    async function asyncFunc(){
            uploadingStart();
            await setTimeout(function () {
                console.log('-----setTimeout log-----');
            },20000)
            uploadingEnd();

            uploadingStart = () =>{
                console.log('---------start---------');
            }

            uploadingEnd = () =>{
                console.log('---------end---------');
            }
     }
     
     asyncFunc();
     
</script>

 

내 예상으로는 start => setTimeout log => end 가 순서대로 콘솔에 찍혀야 하는데... 결과는 아래와 같았다.

 

동기처리가 안됨..

 

콘솔에 보이는 것처럼 동기처리가 안되고, end가 먼저 찍히고, setTimeout이 나중에 찍힌 것을 확인 할 수 있다..

 

그래서 찾아본 결과... 

 

-----------------------------------------------------------------------------------------------------------------------------------

setTimeout() 자체가 Promise 객체를 반환하지 않기 때문에 async와 await이 먹지 않으므로

Promise를 반환하도록 직접 작성한 후에 async와 await을 적용해야 한단다 <= 핵심

-----------------------------------------------------------------------------------------------------------------------------------

 

아래와 같이 해서 해결했다..

 

 

Promise객체 반환하는 setTimeout함수 작성 코드

<script>
	// Promise 객체를 반환하는 setTimeout메서드를 작성후 delay라는 함수 선언
	function delay(ms) {
         return new Promise(resolve => setTimeout(resolve, ms));
     }
    //
    async function asyncFunc(){

        uploadingStart = () => {
            console.log('---------start---------');
        }
        
        uploadingEnd = () => {
            console.log('---------end---------');
        }
		//start시작
        uploadingStart();
        
		//4초후 setTimeout log를 콘솔에 찍음 ( 함수호출도 된다~ )
        await delay(4000);
        console.log('-----setTimeout log-----');
        
        //end 시작
        uploadingEnd();

    }
    
    //asyncFunc 함수 호출
    asyncFunc();

</script>

 

 

이렇게 코드 작성후 실행하면 아래와 같은 결과가 나온다...

 

동기처리 됨

 

 

실제 코드작성후 테스트해보면, start가 찍히고, 2초간의 텀이 있은 후 setTimeout log와 end가 찍히는 것을

확인 할 수 있다..