비동기적 호출 - [setTimeout, setInterval]

선결론 : 비동기적 호출, asynchronous call은 이해하기 쉽지는 않지만 그만큼의 재미가 있다

 

여태까지 자바스크립트에서 배운 코딩은 동기적 호출이었다.

 

간단하게 풀자면 하나씩 부르는 형식이다.

 

 

console.log("Hello")
console.log("World")
console.log("!")

// returns

// "Hello"
// "World"
// "!"

 

위처럼 콘솔에는 하나하나씩 실행을 하게 된다

하지만 이를 비동기적으로, 즉 시간을 동시가 아닌 다르게 해서 호출을 하고자 한다면, 이를 가능하게 해주는 것이 setTimeout과 setInterval이다.

 

 

 

console.log("Hello")
setTimeout(function() {
	console.log("World")
	}, 1000)
console.log("!")

// returns

// "Hello"
// "!"
// "World" //after 1000 ms

 

 

위와 같이 setTimeout은 인자로 함수와 시간(milliseconds)를 받는다.

만약에 추가로 함수에 들어갈 인자를 넣고 싶다면 시간 뒤에 넣어주면 된다, 가령

 

setTimeout(함수, 시간, 매개변수) 처럼 말이다.

 

아무튼 이렇게 되면 함수는 비동기적으로 실행이 되는데 이때 주의해야 할 것은 setTimeout의 this는 window가 default다.

(즉, 함수 내에 this가 사용된다면, bind를 이용해 어느 this를 사용할지 명시해주는 게 좋을거다)

 

만약에 한번 작동하는 것이 아닌 계속해서 반복적으로 작동시키고 싶다면 setInterval을 이용할 수 있다.

setInterval은 setTimeout처럼 함수, 시간(milliseconds), 매개변수 를 받지만 여기서는 주어진 시간에 따른 간격을 맞춰 실행을 반복한다.

 

쉽게 말하면 setTimeout을 일정 시간마다 반복하는 거다.

 

아무튼, 이렇게 해서 비동기적 호출이 가능하다는 것을 알게 되었다.