디바운스와 스로틀을 다시는 잊지 마십시오. 시각화 - Codepen 포함

이 글은 디바운스(Debounce)나 스로틀링(Throttling)이 코드 수준에서 어떻게 작동하는지 설명하려는 또 다른 글이 아니라 개념을 기억하고 시각화하여 업무에 실제로 적용할 수 있도록 설명하는 글입니다.

개인적으로는 디바운싱과 스로틀링의 개념을 망각하는 경우가 많아서 누가 설명해달라고 하면, 혹은 면접에서 질문이 나오면 그냥 ?. 그것을 방지하기 위해 기억을 되살리는 데 도움이 되는 간단한 페이지를 만들었습니다. 사기꾼이 된 기분이 싫다면 따라오세요 ?.

아래 코드펜에서는 디바운스와 스로틀 모두에 대해 지연을 2초로 설정했습니다. 무작위로 음식 항목을 클릭하고 잠시 기다려 보세요.

색인

• 레스토랑 비유
• 설명
  • 디바운스나 스로틀을 사용하는 이유는 무엇입니까?
  • JS 이벤트 핸들러
  • 무슨 문제가 있나요?
  • 디바운스
  • 스로틀

페이지 링크

ashiqsultan.github.io

GitHub 링크

레스토랑 비유

당신이 식당에 있는데 음식을 주문하려고 테이블에 있는 메뉴를 고르고 모든 항목을 읽기 시작한다고 상상해 보세요. (내가 공유한 웹페이지에서 다른 음식 항목을 클릭하는 것은 메뉴 항목을 읽는 것과 동일합니다)

여기에 비유

• ? 음식 항목 읽기 = ? 버튼클릭
• ?‍? 주방에 가는 웨이터 = ? API 호출

레스토랑에 서비스를 제공할 수 있는 세 가지 유형의 웨이터가 있다고 상상해 보세요.

1. ?‍♂️ 일반 웨이터

   • 항목을 언급할 때마다 메모합니다
   • 개별 품목을 위해 주방으로 달려갑니다
   • 모든 이벤트를 즉시 처리하는 JS처럼

2. ? 디바운스 웨이터

   • 메뉴를 읽기 시작하면 그는 주문을 받기 전에 최소 2초 동안 잠시 멈추기를 기다리고 있을 것입니다.
   • API 호출을 하기 전에 사용자가 입력을 마칠 때까지 기다리는 것과 같습니다

3. ?‍? 목이 조이는 웨이터

   • 2초에 한 번씩만 주문을 받습니다
   • 2초 안에 여러 항목을 언급하면 ​​모두 같은 순서로 진행됩니다
   • 사용자 활동에 관계없이 API 호출을 X초마다 한 번으로 제한하는 것과 같습니다

참고: 주요 차이점은 다음과 같습니다.

• 디바운싱: 지정된 시간 동안 활동(버튼 클릭)이 중지될 때까지 기다립니다.
• 제한: ​​활동이 중지되는 시점에 관계없이 정기적인 간격으로 트리거됩니다
• 또한 2초는 예시로 사용한 것일 뿐이며 어떤 시간대라도 가능합니다

설명

어쨌든 디바운스나 스로틀이 필요한 이유는 무엇입니까?

디바운스 또는 스로틀을 이해하기 전에 먼저 이러한 기능이 사용되는 이유를 알아야 합니다. JS 이벤트 핸들러의 동작을 이해하려면

JS의 이벤트 핸들러

JS에서 이벤트 핸들러는 특정 이벤트(예: 클릭, 입력, 스크롤)가 발생할 때 실행되는 함수일 뿐입니다. 기본적으로 이러한 핸들러는 이벤트가 발생할 때마다 실행됩니다 - 모든 키 입력, 모든 클릭 또는 스크롤 동작

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

무슨 일이야?

예를 들어 API를 호출하는 버튼이 있다고 가정해보세요

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

위 함수는 각 버튼 클릭 시 makeApiCall()을 실행합니다(예:) 1초 내에 10번 누르면 1초에 10개의 API 호출이 무엇인지 추측해 보세요. 이 기본 동작입니다.

그러나 이벤트에 대해 매번 API 호출을 실행하는 것은 비효율적일 수 있으며 대부분의 경우 이는 원하는 것이 아닙니다. 여기가 스로틀링과 디바운싱이 중요한 부분입니다.

이 기사에서 정의를 없애고 싶다면 이것이 바로 이 기사일 수 있습니다. 스로틀링과 디바운싱은 이벤트 리스너의 응답 속도를 제어하는 ​​가장 일반적인 두 가지 방법입니다.

디바운싱

디바운싱 코드는 lodash에서 가져올 수 있으므로 설명하지 않고 실제로 사용할 수 있는 위치를 살펴보겠습니다.

사용자가 일정 시간 동안 입력을 멈췄거나 일정 시간 동안 클릭을 멈춘 경우에만 API 호출을 하고 싶을 때 디바운싱을 사용하세요.

이 예에서는 사용자가 5분 동안 계속 버튼을 클릭하면 API 호출이 한 번만 이루어집니다.

여기서 두 가지 일이 일어나고 있습니다.

• 사용자는 클릭을 중지해야 합니다.
• 클릭을 중지한다는 것은 최소한 2초 동안 버튼을 클릭하지 않아야 함을 의미합니다.

조절판

스로틀은 간격과 같습니다. 사용자가 멈출 때까지 기다리지 않고 2초 간격으로 API 호출을 하고 싶을 때 이 기능을 사용하세요

예를 들어 사용자가 멈추지 않고 1분 동안 계속 입력하는 경우 2초마다 API를 호출하게 됩니다.

결론

기사에서 언급했듯이 이는 기능의 작동 방식을 설명하기 위한 것이 아니라 해당 기능이 사용되는 이유를 시각화하고 이해하기 위한 것입니다. 코드 수준에서 작동 방식을 이해하는 것이 좋습니다. 하지만 개인적으로는 여전히 lodash 라이브러리에서 제공하는 디바운스와 스로틀을 사용하고 휠을 재발명하지 않을 것입니다.

글이 마음에 드셨다면 좋아요를 눌러주시면 더 많은 글을 쓰도록 동기를 부여해 드릴 것입니다. 감사해요 ?.

위 내용은 디바운스와 스로틀을 다시는 잊지 마십시오. 시각화 - Codepen 포함의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!