JavaScript - setTimeout , setInterval 에 관하여

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 setTimeout, setInterval 두개의 method 에 대해서 학습해보도록 하겠습니다.

보통 웹 페이지에서 여러분들이 보시는 컨텐츠들 중에 일부 컨텐츠들은, 몇초마다 화면이 바뀌거나, 내용이 새로고침 되는듯한, 그러한 컨텐츠들은, 대다수가 위 두가지의 Method 에 의해 동작될 확률이 높습니다.

 

하지만 두개로 나뉘어진 만큼, 각각의 차이가 존재합니다.

그 차이와 사용법에 대해서 설명해보도록 하겠습니다.

 

==========

1. setTimeout

2. setInterval 

3. 예제 작성해보기

==========

 

1. setTimeout

먼저 이 Method 는 말그대로 일정시간 이후에 동작하도록 하는 기능을 가지고 있습니다.

이 함수의 구성은 기본적으로, 아래와 같이 이루어집니다.

 

setTimeout(function, delay, arg1,2...)
setTimeout(code,delay...)

위의 예시에서 첫번째 매개변수로 지정되는 function , code 는 말 그대로, "타이머"가 지난 뒤에 실행될 함수 혹은 변수로 선언된 문자등을 대입하는 것입니다. 하지만 MDM 에서는 일반적으로 Code 를 삽입하기보다는, function 을 삽입하도록 권장하고 있습니다.

두번째의 delay 는 지연시키게 될 "시간" 입닌다. 이는 "ms" 단위로 이루어져 있습니다.

 

즉 1초를 지연하기 위해서는 1000을 입력해야 합니다.물론 소수점 단위로 입력하게되면 1500, 2200 같은 숫자로도 입력할 수 있습니다. 이는 이후에 있는 setInterval 역시 동일합니다. 

이를 취소하는 함수 역시 존재하는데요. 이 함수는 clearTimeout 이라는 함수입니다.

 

하지만 이 setTimeout 은 "1번"만 실행되는 함수입니다. 

 

2. setInterval 

반면에 setInterval 의 경우, 주기적으로 업데이트가 필요한 컨텐츠들, 혹은 API 로부터 데이터를 받아온 데이터를 주기적으로 변경해야할 때가 존재할 것입니다. 그를 위해서 이 setInterval 을 사용하게 됩니다. 이는 일정한 시간간격을 두고 반복해서 실행하는 것입니다.

기본적인 구성은 위의 setTimeout 과 유사합니다.

 

setInterval(function, delay ...)
setInterval(code, delay ...)

 

setTimeout 과 마찬가지로, 첫번째 매개변수에는 실행하고자 하는 함수 혹은 변수명을 대입하여 사용이 가능합니다.

두번째로는 역시 지연시간을 기록합니다. 단위는 역시 ms 로, setTimeout 과 동일합니다.

위의 setTimeout 과 마찬가지로, 이를 종료하기 위해서는 "clearInterval" 을 사용해서 주기적 실행을 종료할 수 있습니다.

 

3. 예제 작성해보기

 

먼저 setTimeout 을 예시로 작성해보겠습니다.

이전 포스팅에서도 잠깐 언급했듯이, 이들은 비동기방식의 동작을 취하는 함수입니다.

console.log(1)
setTimeout(function(){
    console.log(2)
},1000)
console.log(3)

 

비동기 방식을 취하게 되므로, 여기서 출력의 순서는 1,3,2 입니다.

이를 변수선언 방식으로 하여 clearTimeout 을 적용한다면, 아래의 예시로도 작성할 수 있습니다. 실제사용에서는 이 작성을 적절하게 활용해야 합니다.

 

console.log(1)
console.log(3)
const TimeID = setTimeout(console.log(100), 5000)
clearTimeout(TimeID)
console.log(4)

1,3,4 ,100 처럼 나올수 있지만, clearTimeout 을 적용함으로 결과는 1,3,100,4 가 출력됩니다.

 

동일한 작성방법을 활용해서, Interval 을 작성해보겠습니다.

setInterval(function(){
    console.log(new Date())
},1000)

시간적 이해를 돕기 위해, 현재 시간을 출력하고, 매 초마다 새로고침되도록 작성합니다.

function 에서의 console.log 는 현재시간을 출력하고, 매 초마다 반복되도록 작성합니다.

이제 이 Method 는 별도의 중단없이 매 초마다 시간을 출력하게 됩니다.

 

역시 여기서도 위의 Timeout 과 마찬가지로 clearInterval 을 이용해서 종료를 해야 합니다.

 

const Time = setInterval(function(){
    console.log(new Date())
},1000)
clearInterval(Time)

이렇게 하면, Interval 함수가 실행되는 시점에 종료하므로, 실행되지 않습니다.

 

쉽다면 쉽고, 어렵다면 어려운 setTImeout, setInterval 입니다.

이는 이후에 HTML,CSS,JavaScript 를 활용하면, 더욱 더 다양한 사용방법이 존재하므로, 기본적 개념에 대해서 학습이 되었다면 좋겠습니다.

 

감사합니다.