스로틀이란 무엇이며 스로틀 용도는 무엇이며 스로틀을 만드는 방법은 무엇입니까?

요즘 응용 프로그램은 그 어느 때보 다 복잡합니다. 한편, 사용자는 사용자 경험에서 지연이나 속도 저하가 없기를 기대하므로 개발자의 작업이 더욱 어려워집니다. 다행히 스로틀과 같은 핵이 많이 있습니다. 기능을 희생하지 않고 성능에 도움이 될 수 있습니다. 이 자습서에서는 스로틀과 그 구현에 대해 알아봅니다.

스로틀이란 무엇입니까?

Throttle은 콜백을 인수로 받아 주어진 타임아웃 동안 한 번만 콜백을 실행하는 함수입니다. Throttle은 콜백에 대한 트리거가 계속 발생하는 한 시간 초과가 끝날 때마다 전달된 콜백을 호출합니다.

스로틀 용도는 무엇입니까?

스로틀은 성능 최적화에 사용됩니다. 스크롤, 크기 조정 또는 끌어서 놓기와 같은 반복 이벤트가 있는 경우 스로틀을 사용하여 코드 실행을 제한하여 리소스 사용을 줄일 수 있습니다.

스로틀을 만드는 방법?

이벤트 입력 시 DOM을 업데이트하는 슬라이더를 제공하는 스로틀fork this template을 생성합니다. 다음 단계에서 스로틀을 만들고 슬라이더에 추가하는 방법을 배웁니다.

1단계, 스로틀 기능을 정의합니다.

함수를 생성합니다. 콜백 함수와 타임아웃을 인자로 받고 전달된 인자로 콜백을 실행하는 클로저를 반환하는 이름이 지정된 스로틀.

function throttle(callback, timeout = 1000) {
    // pass arguments to callback
    return (...args) => {
        callback(...args)
    }
}

그런 다음 아래와 같이 기능 슬라이더를 스로틀로 감쌉니다. 시간 제한을 두 번째 인수로 전달할 수 있습니다.

const slide = throttle(() => {
    placeholder.innerText = slider.value;
})

이제 기능 슬라이더가 스로틀을 통해 실행됩니다.

2단계, 시간 초과 단계를 추가합니다.

제한 시간 단계를 나타내는 wait라는 변수를 정의합니다. 첫 번째 트리거에서 콜백을 실행하려면 대기 변수 기본값이 false여야 합니다. 첫 번째 콜백 실행 후 wait 변수를 true로 설정하고 추가합니다. 스로틀이 시간 초과 단계에 있는 경우 향후 호출을 무시하기 위한 콜백 이전의 조건입니다.

function throttle(callback, timeout = 1000) {
  let wait = false
  return (...args) => {
    if (wait) return
    callback(...args)
    wait = true
  }
}

이제 콜백이 처음으로 실행되지만 다른 트리거는 무시되며 슬라이더 썸을 밀어 테스트할 수 있습니다.
다른 콜백 트리거를 실행하려면 대기 변수를 재설정하고 시간 초과 단계를 종료하기 위해 timeout 인수와 동일한 지연으로 setTimeout을 추가해야 합니다.

function throttle(callback, timeout = 1000) {
  let wait = false
  return (...args) => {
    if (wait) return
    callback(...args)
    wait = true

    setTimeout(() => {
      wait = false
    }, timeout)
  }
}

3단계, 통화를 대기합니다.

이제 스로틀이 작동하지만 마지막 트리거를 무시하는 문제가 있습니다. 제한 시간이 끝나기 전에 슬라이더 썸을 다시 밀어 테스트할 수 있습니다. 이 문제를 해결하려면 제한 시간 동안 마지막 트리거를 대기열에 넣고 제한 시간 종료 시 마지막 트리거를 실행해야 합니다.
이를 위해서는 타임아웃 단계에 있는 경우 마지막 트리거 인수를 저장할 변수 이름 대기열이 필요합니다.

function throttle(callback, timeout = 1000) {
  let wait = false
  let queue = null
  return (...args) => {
    if (wait) {
        return queue = args
    }
    callback(...args)
    wait = true

    setTimeout(() => {
      wait = false
    }, timeout)
  }
}

그런 다음 대기 중인 트리거를 실행하려면 콜백을 실행하는 함수가 필요하며 시간 초과가 끝난 후 해당 함수를 실행해야 합니다.
따라서 queuedTasks 라는 함수를 정의하십시오. 해당 함수 내에서 대기 중인 인수로 콜백을 호출합니다. 콜백 실행 후 해당 값을 null로 설정하여 대기열을 비웁니다. 그런 다음 queuedTasks의 시작 부분에 조건을 추가하여 대기열이 비어 있는지 확인하여 대기 단계를 종료합니다. 결국 timeout 단계에서 발생한 트리거를 실행하기 위해 queuedTasks를 다시 호출하는 setTimeout을 정의합니다.

function throttle(callback, timeout = 1000) {
  let wait = false
  let queue = null

  const queuedTasks = () => {
    if (queue == null) {
      return wait = false
    }

    callback(...queue)
    queue = null
    setTimeout(queuedTasks, timeout)
  }

  return (...args) => {
    if (wait) {
      return queue = args
    }

    callback(...args)
    wait = true

    setTimeout(queuedTasks, timeout)
  }
}

이제 슬라이더가 제대로 작동하고 과도한 호출이 무시되어 애플리케이션 성능이 향상됩니다. final code here.을 보실 수 있습니다.

결론적으로

스로틀은 애플리케이션 성능을 최적화할 수 있으며 애플리케이션의 사용자 참여 및 수익 창출 증가로 직접 변환할 수 있는 프리미엄 모양을 제공합니다.

기술에 도전하세요

얼마 전에 튜토리얼을 작성했습니다. 그 튜토리얼에서 스크롤 위치에 따라 클래스를 맨 위로 스크롤 버튼으로 토글하는 작은 자바스크립트 코드를 작성했습니다. 해당 자바스크립트 코드 성능은 스로틀로 향상될 수 있습니다. 도전으로 fork that code 스로틀을 추가하고 아래 댓글 섹션에서 다른 사람과 코드를 공유하십시오.