setTimeout()

let timeId;

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

timeId = setTimeout(sample, 3000);

clearTimeout(timeId);
// setTimeout()을 실행시키지 않는 함수
// => if절이나 특정 이벤트에 넣고 사용하면 효과적임

setInterval()

setInterval(sample, 1000/60);
=> 초당 60번씩 실행되는 것

clearInterval();로 종료시킬 수 있다.

1. canvas에서 반복적으로 무언가를 그릴 때, 많이 사용!
2. 어떤 값을 갱신할 때, 사용!
   그러나, 컴퓨터가 처리할 능력이 안 되면, 프레임 loss가 일어나고 엄청 버벅인다. 이 경우, 배터리 소모도 심해진다.
   => 그래서, 이런 단점을 개선한 것이 requestanimationframe()이다.

requestanimationframe()

setInterval();의 대체제로 많이 쓴다.
최근에 굉장히 자주 사용되는 함수이다.

let timeId;

let n = 0;

const btn = document.querySelector('.btn');

function sample() {
 n++;
 // 해당 함수를 200번만 실행시키고 싶을 때,
 // if 절을 사용한다.
 if( n >= 200 ) { return; }
 // if 절이 없으면,
 timeId = requestanimationframe(sample);
 // 이 부분의 sample이 sample()를 부르는 재귀함수가 되서
 // 무한 반복된다.
}

sample();
// 이 부분은 sample() 내에 조건문이 없으면, 무한 반복된다.
// 그러나, sample(); 대신에

requestanimationframe(sample);
// => 이렇게 쓰면, 딱 1번만 실행된다.


btn.addEventListener( 'click', function(){
	cancelAnimationFrame(timeId);
  	// => requestanimationframe()을 중지시키는 함수
});

---

setTimeout, setInterval 사용시, 했던 실수

=> 번번히 일어날 수 있는 실수이니, 확인해보자!!

간단히 설명하자면,

  // testTimer 역시 변수에 담겼을 뿐인데, 실행이 된다. 혼란스럽군요...
 let testTimer = 0;
 testTimer = setInterval(function () {
      console.log('이거 실행 됩니다.')
    }, 1000);

이 경우, 변수에 할당해놨지만, 함수 자체가 정적이지 않고, 곧바로 실행되는 함수를 담아놨기 때문에 실행된다.

testTimer(); 이런식으로 못 쓴다.

---

(중요) 변수를 언제 만들지 잘 결정해야 한다

• <script> 안에 그냥 있는 코드는 "새로고침"시 1회 실행된다.

• "이벤트 리스너" 안에 있는 코드는 "이벤트 발동"시 1회 실행된다.

=> 이 사실들만 알고 있어도, 전역 변수 사용을 줄일 수 있다.

---