[JavaScript] 자주 다루는 시간 조절 함수 소개

인터랙티브한 웹을 구현할 때 자주 쓰이는 시간 관련한 함수를 알아보도록 하자!

1. setTimeOut

코드를 바로 실행하지 않고, 기다렸다가 실행해야 하는 경우가 있다. 하지만 여기는 JS 환경이고.. CSS 처럼 transition-delay을 이용할 수 없는 일이다.
이럴 때에는 setTimeOut 함수를 이용하면 된다.
*인자로 받을 수 있는 종류
1. 해당 시간이 지난 뒤 실행할 코드를 담은 함수
2. 지연시킬 시간(ms단위)

간단한 예시를 보자.

setTimeout(() => console.log("2초 후에 실행됨"), 2000);

이렇게 설정하게 되면 2초 뒤에 해당 코드가 실행된다.

setTimeout() 함수는 타임아웃 아이디(Timeout ID)라고 불리는 숫자를 반환한다.
타임아웃 아이디는 setTimeout() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리키고 있다. 이를 설정하고 취소 버튼을 통하여 수행하는 setTimeout 를 취소해보자.

timeId = setTimeout(sample, 2000);
btn.addEventListener('click', function(){
     clearTimeout(timeId);
})

이렇게 코드를 작성하게 되면 timeId 객체를 가진 것을 clearTimeout시킴으로써 수행하는 setTimeout을 종료하게 된다.

2초마다 수행하는 sample 내용을 취소 버튼을 통하여 멈추게 하였다. 취소 버튼에는 clearTimeout이 들어 있다.

2. setInterval

setInterval은 어떤 활동을 주기적으로 업데이트 해야 할 때, 사용된다.

timeId = setInterval(sample, 1000);

아래 코드를 보면 1초마다 sample함수 안에 있는 내용을 수행하고자 한다.
해당 함수도 인터벌 아이디(Interval ID)라고 불리는 숫자를 반환한다. 인터벌 아이디는 setInterval() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리키고 있습니다. 이 값을 인자로 clearInterval() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있다.

3. requestAnimationFrame

setInterval을 사용하면 반복을 할 때마다 컴퓨터에 부하가 발생한다. frame 로스나 배터리 방전을 방지하기 위해서 setInterval 대신에 requestAnimationFrame을 사용할 수 있다.

timeId = requestAnimationFrame(sample);

사용할 때에는 이렇게 적용할 sample함수를 넣어 수해할 수 있고, 중단시키기 위해서는 cancelAnimationFrame을 사용할 수 있다.

btn.addEventListener('click', function(){
            cancelAnimationFrame(timeId);
        })