본문 바로가기
Computer Science/JavaScript

자바스크립트 Chapter 10 setTimeout, setInterval and requestAnimationFrame

by Write and Remember 2019. 4. 30.

 

자바스크립트 핵심 컨셉 33가지

 

Chapter 10 setTimeout, setInterval and requestAnimationFrame

 

이번 장에서는 setTimeout, setInterval 그리고

 

requestAnimationFrame을 살펴보자.

 

setTimeout

 

주어진 시간 간격 후에 한번 함수를 실행 한다.

 

function sayHello() {
  console.log('Hello')
}

setTimeout(sayHello, 3000) // 3초 후 Hello

 

function sayHello(pharse, who){
  console.log(pharse + ', '+ who)
}

setTimeout(sayHello, 3000, 'Hello', 'Example') // Hello, Example

 

인자를 전달할 수도 있다.

 

let timerId = setTimeout(() => console.log("never happens"), 2000);

clearTimeout(timerId);

 

clearTimeout을 이용하면 setTimeout을 취소할 수 있다.

 

setInterval

 

주어진 시간 간격으로 정기적으로 함수를 실행 한다.

 

// 1초 간격으로 반복한다.
let timerId = setInterval(() => console.log('Hello'), 1000);

// 5초 후 멈춘다.
setTimeout(() => { clearInterval(timerId); console.log('stop'); }, 5000);

 

clearInterval을 이용하여 setInterval을 취소할 수 있다.

 

requestAnimationFrame

 

setTimeout, setInterval을 사용하여

 

애니메이션과 같은 시각적 변화를 만들 수 있지만

 

requestAnimationFrame을 이용하는 것이 

 

더 좋은 성능을 낼 수 있다.

 

function changeScreen(time) {
  // 시각적 변화 일어남
}

requestAnimationFrame(changeScreen);

 

clearTimeout, clearInterval과 마찬가지로

 

cancelAnimationFrame 으로 취소할 수 있다.

댓글0