[javascript] 스로틀 링과 디 바운싱 해제의 차이점

개인적으로 나는 디 바운스 가 스로틀 보다 이해하기 어렵다는 것을 알았 습니다 .

두 기능이 모두 연기하고 일부 실행 속도를 줄이는 데 도움이됩니다. 스로틀 / 디 바운스에 의해 반환 된 장식 함수를 반복해서 호출한다고 가정하면 …

• 스로틀 : 지정된 기간마다 최대 한 번 원래 함수가 호출됩니다.
• 디 바운스 : 발신자가 지정된 기간 후에 데코 레이팅 된 함수 호출을 중지 한 후 원래 함수가 호출됩니다 .

디 바운스의 마지막 부분이 달성하려는 목표를 이해하는 것이 중요하다는 것을 알았습니다. 또한 _.debounce 구현의 이전 버전이 이해에 도움이된다는 것을 알았습니다 ( https://davidwalsh.name/function-debounce 제공 ).

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

멀리 가져온 은유이지만 도움이 될 수도 있습니다.

IM을 통해 나와 대화하기를 좋아하는 Chatty라는 친구가 있습니다. 그녀가 대화 할 때 5 초마다 새 메시지를 보내면 IM 응용 프로그램 아이콘이 위아래로 튀는 동안 …

• 순진한 접근 방식 : 모든 메시지가 도착하는 한 모든 메시지를 확인하십시오. 앱 아이콘이 튀면 확인하십시오. 가장 효과적인 방법은 아니지만 항상 최신 상태입니다.
• 스로틀 접근 방식 : 5 분마다 한 번씩 확인합니다 (새 것이있을 때). 새 메시지가 도착하면 지난 5 분 동안 확인한 경우 무시하십시오. 여전히 루프에있는 동안이 방법으로 시간을 절약 할 수 있습니다.
• 디 바운스 접근 방식 : Chatty는 전체 스토리를 여러 조각으로 나눠서 하나씩 메시지로 보냅니다. Chatty가 전체 기사를 마칠 때까지 기다립니다. 5 분 동안 메시지 전송을 중단하면 완료된 것으로 간주하고 이제 모두 확인합니다.

답변

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+