이것은 단지 코드 수준에서 디오 나 스로틀 링이 어떻게 작동하는지 설명하려는 또 다른 기사가 아닙니다. 오히려 이것은 개념을 기억하고 시각화하여 실제로 작업에 적용 할 수 있도록 개념을 시각화하는 그림입니다.

개인적으로, 나는 종종 비난과 조절의 개념을 잊어 버린다. 그래서 누군가가 나에게 설명 해달라고 요청하거나 인터뷰에서 질문이 나타나면 단지 깜박임? 이를 피하기 위해 기억을 새로 고치는 데 도움이되는 간단한 페이지를 만들었습니다. 사기꾼이 따라가는 것처럼 느끼고 싶지 않다면?.

아래 코드펜에서는 분해와 스로틀 모두에 대해 지연을 2 초로 설정했습니다. 임의의 음식 품목을 클릭하고 일시 중지하십시오.

색인

• 식당 비유
• 설명
  • 어쨌든 왜 분해 또는 스로틀?
  • JS 이벤트 핸들러
  • 무슨 일이야?
  • Debounce
  • 조절판

페이지 링크

Github 링크

식당 비유

식당에 있고 음식을 주문하고 싶다고 상상해보십시오. 그래서 테이블에서 메뉴를 선택하면 모든 품목을 읽기 시작합니다. (공유 한 웹 페이지에서 다른 음식 품목을 클릭하는 것은 메뉴 항목을 읽는 것과 동일합니다)

여기

• ? 음식 항목 읽기 =? 버튼 클릭
• ? &? 웨이터는 주방에 가고 =? API Call

그리고 식당에는 당신을 섬길 수있는 세 가지 유형의 웨이터가 있다고 상상해보십시오 :

1. 항목을 언급 할 때마다 메모를합니다

   각 개별 품목에 대해 주방으로 달려갑니다
   • 모든 단일 이벤트를 즉시 처리하는 JS와 같은
   ? Defounced Waiter

2. 메뉴를 읽기 시작하면 주문을 받기 전에 2 초 동안 잠시 멈출 때까지 기다릴 것입니다.

   API 호출을하기 전에 사용자가 타이핑을 완료하기를 기다리는 것을 좋아합니다
   ? ‍? 스로틀 웨이터

3. 2 초마다 한 번만 주문을받습니다

   2 초 안에 여러 항목을 언급하면 ​​모두 같은 순서로 진행됩니다
   • 사용자 활동에 관계없이 API 호출을 한 번씩 한 번씩 제한하는 것과 같습니다
   참고 : 주요 차이점은 다음과 같습니다.

Debouncing : 활동을 기다립니다 (버튼 클릭) 지정된 시간 동안 중지하기 위해

스로틀링 : 활동이 중지 된 시점에 관계없이 정기적으로 트리거

• 또한 2 초만 제가 예를 들어 TimePeriod
일 수 있습니다.
• 설명

어쨌든 왜 쇠약하거나 스로틀을 타는가?

분해 또는 스로틀을 이해하기 전에 처음부터 왜 사용되는지 알아야합니다. 이를 알기 위해 JS 이벤트 처리기의 행동을 이해할 수 있습니다

JS의 이벤트 처리기

js에서 이벤트 핸들러는 특정 이벤트 (클릭, 타이핑 또는 스크롤)가 발생할 때 실행되는 기능 일뿐입니다.

기본적으로,이 핸들러는 이벤트가 발생할 때마다 발사됩니다.

// 기본 이벤트 핸들러 button.adeventListener ( 'click', function () { Console.log ( '버튼 클릭!'); }); // 기본 키 스트로크 핸들러 input.addeventListener ( 'keyup', function () { Console.log ( '키 프레스!'); });

무슨 일이야?
예를 들어 API 호출을하는 버튼이 있습니다

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

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

function makeapicall () { Console.log ( "API Call Made"); } button.addeventListener ( 'click', () => { Makeapicall (); });

위의 함수는 각 버튼에서 Makeapicall ()을 실행합니다.

그러나 이벤트를 위해 매번 API 통화를 해고하는 것은 비효율적 일 수 있으며 대부분의 경우 이것은 당신이 찾고있는 것이 아닙니다. 이곳은 스로틀 링과 디포 킹이 그림에 들어오는 곳입니다.

이 기사에서 정의를 빼앗아 가고 싶다면 이것이 문제 일 수 있습니다.

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

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

디포 킹

나는 이것을 Lodash에서 가져올 수 있으므로 Debouncing 코드를 설명하지 않을 것입니다. 오히려 우리는 당신이 실제로 그것을 사용할 수있는 곳을 볼 것입니다.

사용자가 일정 시간 동안 입력을 중지하거나 일정 시간 동안 클릭을 중지 한 경우에만 API 호출을 원할 때 DeCouncing을 사용하십시오.

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

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

사용자는 클릭을 중지해야합니다.

클릭 중지 중지 2 초 동안 평균 수단 버튼을 클릭하지 않아야합니다.

조절판

스로틀은 간격과 같습니다. 사용자가 멈출 때까지 기다리고 싶지 않을 때는 이것을 사용하십시오.

예제 사용자가 1 분 동안 일시 중지없이 1 분 동안 입력 한 경우 2 초마다 API를 호출합니다.
결론
기사에서 언급했듯이 이것은 기능이 어떻게 작동하는지 설명하는 것이 아닙니다. 코드 수준에서 그들이 어떻게 작동하는지 이해하는 것이 좋습니다. 그러나 개인적으로 Lodash Library에서 제공하는 디바 트와 스로틀을 사용하고 휠을 재발 명하지 않습니다.

기사가 마음에 들면 엄지 손가락을 남겨두면 더 많은 글을 쓰도록 동기를 부여 할 것입니다. 감사해요 ?.