ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 10 setTimeout, setInterval and requestAnimationFrame
    Computer Science/JavaScript 2019.04.30 01:58

     

    자바스크립트 핵심 컨셉 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