JavaScript 타이머 함수 setTimeout / setInteval

(☞ﾟヮﾟ)☞ 시작하기에 앞서

얼마전까지 타이머함수가 필요한상황마다 구글링을하며 참고했던 모습을 내 모습을 보고 빈번하게 쓰이는만큼 내용정리가 필요할것같아 포스팅을한다.

1. setTimeout() / clearTimeout()

setTimeout(callback, delay) : 일정 시간이 지난 후 함수를 실행
clearTimeout(timerid) : setTimeout()함수를 종료시킴

1-1 setTimeout()

첫번째인자는 함수(doFn)이며 두번째 인자는 시간(3000 =3s =3초)이다.
3초뒤에 로그에 찍힌걸 확인할 수 있다.

직접 코드를 작성하는방법도 있다.

두번째인자인 시간뒤에 인자를 적어줄 수 있다.

1-2 clearTimeout

clearTimeout을 사용하여 setTimeout함수가 실행되지않도록 처리하였다.

2. setInterval() / clearInterval()

setInterval(callback, delay) : 일정 시간동안 함수를 반복 실행
clearInterval(timerid) : setInterval()함수를 종료시킴

2-1 setInterval

사용방법은 setTimeout()과 동일하다.
함수가 3초마다 반복실행되었다.

2-2 clearInterval

setInterval() 바로밑줄에 clearInterval()을 추가하여
함수가 실행되지않도록 하였다.

응용하여 showName함수내부에 clearInterval()을 추가하였더니
로그가 한번만 찍힌걸 확인할 수 있었다.
이유는 setInterval가 showName함수를 실행시켰고 showName은 정상적으로 실행이 되어 console.log(name)이 실행되었다. 다만 바로 밑줄 clearInterval함수로 인해 반복되어질 setInterval함수는 종료된것이다.