<자바스크립트 기초> 16. 타이밍 다루기

1. setTimeout

* 지연

 - setTimeout 은 타이밍을 원하는 만큼 지연시키는 역할을 수행한다. 

setTimeout(F, 1000);

 - setTimeout(function, ms); 과 같이 사용한다. 이 때 함수자리에는 미리 선언해둔 함수가 들어갈 수 있고, 두번째 매개변수는 지연시킬 시간을 ms단위로 기재한다.

 

* 취소

 - 앞서 봤던 지연을 변수에 넣을 수도 있다.

let timeId;
timeId = setTimeout(F, 1000); 
clearTimeout(timeId);

 - 변수 = setTimeout(function, ms); 이라고 선언하여 작동시킬 수 있으며, 이 때 clearTimeout(변수) 를 이용하면 셋타임을 완전히 클리어시켜서 함수자체가 실행이 안되도록 할 수 있다.

 

2. setInterval

* 반복

 - setInterval은 특정 함수를 여러번 원하는 시간만큼 반복하도록 할 수 있다.

let a;
a = setInterval(F, 1000);

 - setInterval(함수, 시간) 으로 작성하며 ms단위로 작성된 시간마다 함수를 계속 반복한다.

 

* 취소

clearInterval(a);

  - 클리어 인터벌을 통해 반복을 멈출 수 있다.

 

3. requestAnimationFrame

- 이는 위의 인터벌의 단점을 극복한 방식이다. 인터벌 방식은 반복 와중에 frame loss가 일어날 가능성이 있고, 배터리를 빨리 닳게한다.

 - requestAnimationFrame은 함수를 호출하는 역할인데 이를 반복시킬 함수안에 작성하면 함수를 계속 재호출하게되어 반복되는 방식이다. 이 때 시간은 1/60초를 지향하게된다.

let ex;
function a(){
	console.log('example');
    ex = requestAnimationFrame(a);
}

//cancelAnimationFrame(ex);

 - 위와 같이 함수안에서 자기 자신함수를 재호출한다. 이를 멈추려면 cancelAnimationFrame(변수)를 사용하면 된다. 이는 버튼 같은 곳에 이벤트 리스너를 통해 넣어주는 방식이 있을 수 있겠다.

 

 - 위를 다른 방식으로 제어하여 보자. 즉 200번을 초과하여 반복되면 그만하도록 코드를 작성해보자.

let ex;
let n = 0;
function a(){
	n++;
    console.log(n);
    if (n>200) {
    	return; //n이 200보다 크면 중지
    }
    ex = requestAnimationFrame(a);
}

 : 위를 실행하면 n이 201이 될 때까지 함수를 반복하게된다.

 

 

 

 

 

 

---

 

 

참고

 

 

이 글은 인프런에서 관련 강의를 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

인터랙티브 웹 개발

인터랙티브 웹 개발 제대로 시작하기 - 인프런