빠른 팁 : 스크롤 이벤트를 스로틀하는 방법

키 포인트

스크롤 이벤트를 듣는 것은 사용자가 스크롤 할 때마다 브라우저가 콜백 함수를 실행하기 때문에 성능 저하를 유발할 수 있습니다. 스로틀은 주어진 시간 간격에 걸쳐 일정한 이벤트 흐름을 보장하는 반면, 탈취는 일련의 이벤트를 단일 이벤트로 결합합니다. JavaScript에서 이벤트 조절 구현은 복잡 할 수 있으며, 이벤트 스로틀링의 표준 인 Lodash와 같은 타사 구현을 사용하는 것이 좋습니다. Lodash의 스로틀 링 함수는 롤링 이벤트 조절을 단순화하고 콜백 함수가 이벤트의 전면 및/또는 후면 가장자리에서 실행되는지 여부를 결정하는 옵션을 제공합니다.

스로틀 링과 분만을 선택하는 열쇠는 해결해야 할 문제의 본질을 보는 것입니다. 스로틀은 스크롤링과 같은 주어진 시간 내에 발생하는 이벤트에 적용되며, 이벤트 간격이 중요하지 않은 키 프레스와 같은 이벤트에 디오 트언이 적용됩니다.

• 이 기사는 Vildan Softic과 Julian Motz에 의해 검토되었습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewer에게 감사합니다! 스크롤 이벤트를 듣는 위험 중 하나는 성능 저하입니다. 브라우저는 사용자가 스크롤 할 때마다 콜백 함수를 실행하며, 이는 초당 많은 이벤트를 가질 수 있습니다. 콜백 함수가 많은 Redraw 작업을 수행하는 경우 최종 사용자에게 나쁜 소식을 의미합니다. 스크롤 이벤트가 발생할 때와 같은 대부분의 뷰를 다시 그리면을 다시 그리기에 다시 그리기가 비싸다.
다음 예는이 문제를 보여줍니다 Codepen에서 예외보기 : 스크롤링되지 않은 스크롤 이벤트
성능 저하 이외에도 발작이 발생하기 쉽습니다. 이 예제는 컴퓨터가 정확히 지침을 따를 때 발생하는 일을 보여줍니다. 배경색 사이에 부드러운 전환은 없으며 화면이 깜박입니다. 불행한 프로그래머는이 세상에 희망이 없다고 생각할 수 있습니다. 더 나은 방법이 없습니까?
표준 이벤트

한 가지 해결책은 이벤트를 연기하고 여러 이벤트를 한 번에 관리하는 것입니다. 이 작업을 수행하는 데 도움이되는 일반적으로 사용되는 두 가지 기능이 있습니다.

신뢰는 주어진 시간 간격에 걸쳐 일정한 이벤트 흐름을 보장하는 반면, 덤핑은 일련의 이벤트를 단일 이벤트로 결합합니다. 한 가지 사고 방법은 스로틀링이 시간을 기준으로하고, 디포는 이벤트를 기반으로한다는 것입니다. 스로틀은 실행되는 것이 보장되며, 패킷이 발생한 후에 De-Jitter는 실행되지 않습니다. 이것에 대해 더 알고 싶다면, 탈지 및 조절에 대한이 심도있는 토론을 확인하십시오. dehaking

분해는 Ajax 버튼과 같은 다양한 문제를 해결합니다. 양식에 무언가를 입력 할 때 각 Keypress에 대한 요청을 보내는 이유는 무엇입니까? 보다 우아한 솔루션은 일련의 키를 AJAX 요청을 트리거하는 하나의 이벤트에 결합하는 것입니다. 이것은 타이핑의 자연스러운 프로세스를 준수하고 서버 리소스를 저장합니다. 주요 프레스의 경우 사용자가 일정한 속도로 입력하지 않기 때문에 이벤트 간격이 중요하지 않습니다.

신뢰

분해 보장이 없으므로 또 다른 방법은 롤링 이벤트를 스로틀하는 것입니다. 스크롤은 주어진 시간 내에 발생하므로 스로틀에 적합합니다. 사용자가 스크롤을 시작하면 적시에 실행을 보장합니다.

이 기술은 페이지의 특정 부분에 있는지 확인하는 데 도움이됩니다. 페이지의 크기가 주어지면 내용을 스크롤하는 데 몇 초가 걸립니다. 이를 통해 스로틀링은 특정 간격 내에서 한 번만 이벤트를 트리거 할 수 있습니다. 이벤트 스로틀 링은 스크롤 경험을 더 부드럽게 만들고 실행을 보장합니다.

다음은 기본 JavaScript로 작성된 간단한 이벤트 스로틀입니다.

이 구현은 함수가 처음 호출되는 순간을 추적하는 시간 변수를 설정합니다. 반환 된 기능이 호출 될 때마다 대기 간격이 통과되었는지 확인하고 그렇다면 콜백을 트리거하고 시간을 재설정합니다.

Codepen : Native JS Throttling 구현의 예를보기

사용자 라이브러리

스로틀 링 사건에는 많은 위험이 있으며 직접 작성하는 것이 좋습니다. 자체 구현을 작성하는 대신 타사 구현을 사용하는 것이 좋습니다.

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

lodash

lodash는 JavaScript에서 이벤트 스로틀의 사실상 표준입니다. 이 라이브러리는 오픈 소스이므로 원하는대로 코드를 탐색 할 수 있습니다. 이점은 라이브러리가 모듈 식이므로 원하는 것을 얻을 수 있다는 것입니다. Lodash의 스로틀 링 함수를 사용하여 롤링 이벤트 스로틀링이 간단 해집니다. 이것은 들어오는 롤링 이벤트 급류를 1000 밀리 초 (1 초)마다 한 번씩 제한합니다.

API는 다음과 같이 전면 및 백 에지 옵션을 제공합니다. 이 옵션은 콜백 함수가 이벤트의 전면 및/또는 뒷면에서 실행되는지 여부를 결정합니다. 여기서 한 가지 문제는 전면과 후면 모서리를 False로 설정하면 콜백 함수가 발사되지 않는다는 것입니다. 프론트 엣지를 True로 설정하면 즉시 콜백 실행을 시작한 다음 스로틀링이 시작됩니다. 이렇게하면 전면과 후행 가장자리를 모두 true로 설정할 때 각 간격에 대한 실행을 보장합니다.

코드 펜에서 데모를 봅니다 : 스로틀 롤링 이벤트

소스 코드를 살펴보면 throttle ()가 Debounce ()의 래퍼라는 것이 흥미 롭습니다. 스로틀은 단순히 원하는 동작을 변경하기 위해 다른 매개 변수 세트를 전달합니다. 스로틀은 Maxwait을 설정 하여이 길이를 기다린 후에 실행을 보장합니다. 나머지 구현은 동일하게 유지됩니다.

다음 이벤트 스로틀 링 모험에서 당신에게 좋은 lodash를 찾기를 바랍니다!

결론 스로틀과 분만의 열쇠는 해결할 문제의 본질을 확인하는 것입니다. 이 두 기술은 다른 사용 사례에 적합합니다. 답을 찾으려면 사용자의 관점에서 질문을 살펴 보는 것이 좋습니다.

Lodash를 사용하는 장점은 간단한 API에서 많은 복잡성을 추상화한다는 것입니다. 좋은 소식은 전체 라이브러리를 추가하지 않고 프로젝트에서

를 사용할 수 있다는 것입니다. 필요한 기능이 포함 된 사용자 정의 빌드 만 만들 수있는 도구 인 Lodash-Cli가 있습니다. 이벤트 스로틀은 전체 라이브러리의 작은 부분 일뿐입니다.

롤링 롤링 이벤트 (FAQ)에 대한 FAQS (FAQ)

JavaScript에서 롤링 이벤트를 조절하는 목적은 무엇입니까?

JavaScript의 신뢰 롤링 이벤트는 웹 사이트 또는 웹 응용 프로그램의 성능을 최적화하는 데 사용되는 기술입니다. 사용자가 웹 페이지에서 스크롤하면 브라우저는 각 픽셀의 움직임에 대한 스크롤 이벤트를 생성합니다. 이로 인해 초당 수백 또는 수천 개의 이벤트가 생성 될 수있어 웹 페이지의 성능을 심각하게 저하시킬 수 있습니다. 이러한 이벤트를 강화함으로써 처리 할 이벤트 수를 제한하여 웹 페이지 성능 및 응답 성을 향상시킬 수 있습니다.
• 스로틀은 JavaScript에서 어떻게 작동합니까?

이벤트 실행 사이의 지연을 설정하여 JavaScript 작업에 대한 신뢰는 . 이벤트가 트리거되면 타이머가 시작됩니다. 타이머가 끝나기 전에 다른 이벤트가 트리거되면 이벤트는 무시됩니다. 이렇게하면 다른 이벤트가 처리되기 전에 일정량의 시간이 통과해야합니다. 이 기술은 스크롤링 이벤트와 같은 자주 트리거되는 이벤트에 특히 유용합니다.

스로틀 링과 탈취의 차이점은 무엇입니까?

• 신뢰 및 분해는 시간이 지남에 따라 함수를 실행할 수있는 횟수를 제한하는 데 사용되는 기술입니다. 둘의 주요 차이점은 대기 시간을 처리하는 방법입니다. 스로틀은 x 밀리 초마다 함수가 두 번 이상 호출되지 않도록하는 반면, 디오 트인트는 마지막 호출 이후 x 밀리 초가 경과 될 때까지 함수가 호출되지 않도록합니다. 다시 말해, 스로틀 링은 규칙적인 간격으로 함수를 실행하는 반면, 비활성의 기간 후에 분해는 기능을 실행합니다.
JavaScript에서 조절하는 방법은 무엇입니까?

함수는 JavaScript에서 스로틀에 사용될 수 있습니다. 이 함수를 사용하면 지정된 수의 밀리 초 단위로 함수의 실행을 지연시킬 수 있습니다. 이벤트 리스너와 함께 를 사용하면 이벤트 핸들러 기능이 x 밀리 초마다 두 번 이상 호출되지 않도록 할 수 있습니다.

• 스크롤 이벤트 외에 다른 이벤트와 스로틀링을 사용할 수 있습니까?
예, 스로틀 링은 스크롤 이벤트뿐만 아니라 JavaScript의 모든 유형의 이벤트와 함께 사용할 수 있습니다. 마우스 이동 이벤트, 이벤트 크기 조정 및 주요 프레스 이벤트와 같은 광범위한 처리를 유발하거나 필요한 이벤트에 특히 유용합니다.

스로틀링을 내장 지원하는 라이브러리 나 프레임 워크가 있습니까?

• 예, 스로틀 링에 대한 내장 지원을 제공하는 여러 라이브러리와 프레임 워크가 있습니다. 예를 들어, 인기있는 JavaScript 유틸리티 라이브러리 Lodash는 조절 기능을 제공하여 스로틀링을 쉽게 구현할 수 있습니다. 마찬가지로, 인기있는 JavaScript 라이브러리 jQuery는 API에서 조절 기능을 제공합니다.
스로틀링의 잠재적 인 단점은 무엇입니까?

스로틀링은 웹 페이지의 성능을 향상시킬 수 있지만 부적절하게 사용하면 사용자 경험 응답이 느리게 이어질 수도 있습니다. 예를 들어, 지연이 너무 높아지면 사용자는 작업과 웹 페이지의 응답 사이에 지연을 알 수 있습니다. 따라서 스로틀링을 사용할 때 성능과 응답 속도 사이의 균형을 찾는 것이 중요합니다. setTimeout

• 스로틀링의 효과를 어떻게 테스트합니까? 스로팅 전후에 웹 페이지의 성능을 측정하여 스로틀링의 효과를 테스트 할 수 있습니다. 이는 브라우저 개발자 도구를 사용하여 수행 할 수 있습니다.이 도구는 처리 이벤트에 걸리는 시간을 포함하여 웹 페이지 성능에 대한 자세한 정보를 제공합니다.

다른 성능 최적화 기술과 함께 스로틀을 사용할 수 있습니까?

예, 스로틀링은 분해 및 와 같은 다른 성능 최적화 기술과 함께 사용할 수 있습니다. 이러한 기술을 결합하면 웹 페이지의 성능과 응답 성을 더욱 향상시킬 수 있습니다.

스로틀링의 대안이 있습니까?

예, 분해 및 를 포함하여 스로틀링에 대한 몇 가지 대안이 있습니다. 분해는 스로틀 링과 유사하지만 시간이 지남에 따라 함수를 호출 할 수있는 횟수를 제한하는 대신 마지막 호출 이후 특정 시간이 지나갈 때까지 함수가 호출되지 않도록합니다. 는 브라우저에 애니메이션을 실행하도록 지시하고 브라우저가 지정된 기능을 호출하여 다음 리피트하기 전에 애니메이션을 업데이트하도록 요청하는 메소드입니다.

위 내용은 빠른 팁 : 스크롤 이벤트를 스로틀하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!