[JS] Timing

setTimeout

~초 후에 함수를 실행하세요! 시간 예약!!

리턴값은 number (횟수)

활용 : 내가 원하는 만큼 시간을 지연시킬 때

setTimout(funcion() {}, 1000)

clearTimeout 으로 타이머 취소시키기

<button class="btn">클릭하면 3초가 지나도 alert 안뜸</button>
	<script>
		const btnElem = document.querySelector('.btn');

		function sayHi() {
			alert('안녕!');
		}

		const timerId = setTimeout(sayHi, 3000);
		btnElem.addEventListener('click', function () {
			clearTimeout(timerId);
		});
	</script>

timeId = setTimeout(sample, 3000);

clearTimeout(timeId);

timeId = setTimeout(sample, 3000);

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

❤️ 정리

---

setInterval

clearInterval 로 인터벌 멈추기

timeId = setInterval(sample, 1000 / 60);

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

setInterval의 단점

무대뽀라서 성능이 안 좋으면 프레임 로스, 배터리도 빨리 닳고.. 등

그 단점을 개선한 => requestAnimationFrame

• 그래서 canvas에서는 requestAnimationFrame을 더 많이 씀
• 물론, setInterval도 쓰긴 씀. 타임 설정이 가능하다는 장점 있음

---

requestAnimationFrame (재귀)

초당 60번이 목표 (60번이 보장되는 것은 아님)

function sample() {
	console.log('sample');

	timeId = requestAnimationFrame(sample);
}

sample();

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

조건을 주고 싶다면

let timeId;
let n = 0;
const btn = document.querySelector('.btn');

function sample() {
	n++;
	console.log(n);
	if (n > 200) {
		return;
	}
	timeId = requestAnimationFrame(sample);
}

sample();

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