requestAnimationFrame()

requestAnimationFrame
: 이벤트가 실행될때는 코드를 변경하지 않고 나중에 브라우저가 화면을 업데이트 할 때 등록한 변경사항을 적용한다.

const button = document.querySelector('button');
    button.addEventListener('click', ()=> {
      requestAnimationFrame(()=> {
        document.body.style.backgroundColor = 'black';
      });
      requestAnimationFrame(()=> {
        document.body.style.backgroundColor = 'orange';
      });
      requestAnimationFrame(()=> {
        document.body.style.backgroundColor = 'skyblue';
      });
    });

Call Stack 안에서 코드 블럭이 실행되고 난 후 바로 setTimeout()의 콜백함수를 실행하고 싶을 때 이렇게 사용한다.

const button = document.querySelector('button');
    button.addEventListener('click', ()=> {
      requestAnimationFrame(()=> {
        document.body.style.backgroundColor = 'black';
      });
      requestAnimationFrame(()=> {
        document.body.style.backgroundColor = 'orange';
      });
      requestAnimationFrame(()=> {
        document.body.style.backgroundColor = 'skyblue';
      });
      setTimeout(()=> {
	//
      }, 0); // 0sec!
    });