코락 CoRock
코딩하는 락스타
코락 CoRock
  • 분류 전체보기 (393)
    • frameworks (19)
      • spring (19)
      • spring-boot (0)
      • testing (0)
    • languages (94)
      • java (39)
      • kotlin (0)
      • python (42)
      • r (13)
    • libraries (0)
    • programming (239)
      • android (13)
      • c (17)
      • cpp (22)
      • database (18)
      • design-pattern (4)
      • data-structures (11)
      • git (8)
      • hadoop (6)
      • html-css (7)
      • issue (4)
      • javascript (26)
      • jsp (34)
      • os (29)
      • php (6)
      • preferences (19)
      • etc (15)
    • discography (37)
      • k-pop (18)
      • pop (19)
    • blog (3)

블로그 메뉴

  • Programming
  • Java
  • JavaScript
  • Discography
  • K-Pop Songs
  • Pop Songs
  • Blog
  • Guestbook

공지사항

인기 글

태그

  • r
  • linux
  • 파이썬
  • oracle
  • Android
  • CentOS
  • javascript
  • Java
  • 자바스크립트
  • jsp
  • Spring
  • python

최근 댓글

최근 글

티스토리

반응형
hELLO · Designed By 정상우.
코락 CoRock

코딩하는 락스타

[33-js-concepts] 10. setTimeout, setInterval and requestAnimationFrame
programming/javascript

[33-js-concepts] 10. setTimeout, setInterval and requestAnimationFrame

2020. 1. 6. 12:53
반응형

- setTimeout : 자바스크립트 개념에서 온 것이 아니고, 브라우저 그리고 nodeJS 개념에서 왔다.

=> 일정 시간이 지난 후에 기능을 메시지큐에 넣어주고 스택이 비게되면 자바스크립트가 실행한다.

일정 시간 후 바로 실행 될 수도 있고 콜스택에 함수가 많으면 천천히 실행 될 수도 있다.

 

setTimeout(function(name) { }, 3000, param1);

> 세번째 파라미터 부터는 콜백 함수의 인자값을 의미한다

 

// 이 경우 콜백함수를 setTimeout에 주는것이 아니라 자바스크립트가 직접 실행 하게 되므로 비추!!

// 해서 2번처럼 해야한다. > 첫번째 매개변수에 함수명만 입력

1. setTimeout(console.log("Hello"), 10000);

// 함수를 실행하지말고, 함수의 이름을 넣도록. 그러면 자바스크립트가 아닌 브라우저에서 실행이 될 것 이다.

2. setTimeout(console.log, 10000, "Hello");

 

// 함수를 취소 하고 싶은 경우 -> 이것을 변수로 저장해서 clear 를 사용하면 된다.

const helloT = setTimeout(console.log("Hello"), 10000);

console.log(helloT); // 실행시 setTimeout 의 ID가 뜬다.

 

clearTimeout(helloT); // 생성된 setTimeout 의 ID를 정리해준다.

 

- setInterval : 정해진 시간마다 함수를 호출한다.

인터벌이 1초보다 적다면 크롬에서는 시간을 1초로 맞춰버린다.

즉, 적용할 수 있는 최소 시간은 1초이다. (1초 이하의 시간은 의미없음. 무시됨)

취소는 setTimeout 처럼 하되 clearInterval() 하면된다.

 

- requestAnimationFrame(callback)

이전에 스크립에서 뭔가 움직이게하려면 사람들은 setInterval 을 사용했다.

하지만 setInterval 에 명시한 시간이 정확하지 않으므로 마냥 의지할 수 없었다.

(또한, CPU, 그래픽카드가 느리면 인터벌이 느려질 수 있음)

그래서 나온 것이 requestAnimationFrame 이다.

이 것은 브라우저가 다시 칠해지기 전에(= 이미지가 렌더링 되기 전에) 함수를 실행한다.

브라우저가 업데이트 할때마다 requestAnimationFrame 를 요청하고 애니메이션을 수정할 수 있다.

매개변수에 시간이 없는데 콜백함수를 호출하는 시기는 브라우저 자체에서 결정하기 때문에 원하는 시간으로 조정하고 싶은경우 따로 구현해야한다.

 

const sayHi = () => {

console.log("Hi");

requestAnimationFrame(sayHi);

}

 

requestAnimationFrame(sayHi);

 

프레임 요청을 취소하고 싶은 경우 => cancelAnimationFrame(requestID);

 

# requestAnimationFrame() 의 장점

setTimeout(), setInterval()은 보이지 않은 곳에서도 수행되지만, requestAnimationFrame()는 현재 창에 표시 되지 않으면 애니메이션을 중지하여 배터리 수명과 성능향상에 도움이 됩니다

그래픽 카드로 구동됨!!!!!!!

1초에 60프레임 호출

  • 보통 캔버스로 그림그릴때
  • 게임 만들때
  • 정확한 수치가 필요할떄

 

뭔가 빠르게 실행시켜야 하는 로직이 필요하다면 requestAnimationFrame() 를 사용하자.

반응형
저작자표시 비영리 변경금지 (새창열림)
    'programming/javascript' 카테고리의 다른 글
    • [33-js-concepts] 12. 비트 연산자, 형식화 배열, 버퍼 (Bitwise Operators, Type Arrays and Array Buffers)
    • [33-js-concepts] 11. 자바스크립트 엔진 (JavaScript Engines)
    • [33-js-concepts] 9. 메시지 큐와 이벤트 루프 (Message Queue and Event Loop)
    • [33-js-concepts] 8. IIFE, Modules, Namespaces
    코락 CoRock
    코락 CoRock
    A COder dreaming of being a ROCKstar

    티스토리툴바