window.requestIdleCallback()

이제는 많은 분들이 알고있으며, 사용하는 곳도 많은 이 requestIdleCallback에 대해서 심화적으로 작성을 하려고 합니다.

window.requestIdleCallback(callback[, options])

흔히 requestIdleCallback 함수는 parameter로 callback function과 options를 넣는다.

모르는 분들을 기준으로 작성을 하자면, options값으로는 timeout을 넣을 수 있다. idleCallback이 너무 오래걸리는 경우가 발생하는 경우를 방지하기 위해서 사용한다.

window.requestIdleCallback(callback function, { timeout: 10000 })

여기에 더 나아가 callback function의 args로 넘어가는 값이 있다.!!!

바로 IdleDeadline이다.

IdleDeadline

IdleDeadline는 Property 1개, Method 1개를 가진다.

IdleDeadline.didTimeout

위에서 언급한 options 값의 timeout이 만료되었음에도 불구하고 실행중이라면, 값이 true가 되는 Boolean 값이다.

function (deadline) {
  try {
    if (deadline.didTimeout) {
      throw new Error('IdleCallback timeout')
    }
  }
}

IdleDeadline.timeRemaining()

options 값의 timeout을 기준으로 현재 유휴 시간에 남아있는 밀리초 수를 예측하는 부동소수점 값이 반환된다.

function (deadline) {
  try {
    if (deadline..timeRemaining() <=0 ) {
      throw new Error('no remaining time')
    }
  }
}