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

누구든지 속도 제한 목적으로 함수를 제한하는 것과 취소하는 것의 차이점에 대해 간단한 단어로 설명 할 수 있습니까?

나에게 같은 일을하는 것 같습니다. 나는이 두 블로그를 확인하여 확인했다.

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

간단히 말하면 :

• 스로틀 은 기능 실행을 지연시킵니다. 여러 번 발생하는 이벤트 알림을 줄입니다.
• Debouncing 은 함수에 대한 일련의 순차적 호출을 해당 함수에 대한 단일 호출로 묶습니다 . 여러 번 발생하는 이벤트에 대해 하나의 알림이 작성되도록합니다.

여기서 차이점을 시각적으로 볼 수 있습니다

크기 조정 또는 마우스 이동 이벤트가 발생할 때와 같이 많이 호출되는 함수가있는 경우 여러 번 호출 할 수 있습니다. 이 동작을 원하지 않으면 스로틀 을 사용하여 함수가 정기적으로 호출되도록 할 수 있습니다 . 수신 거부 는 여러 이벤트가 끝날 때 (또는 시작될 때) 호출됨을 의미합니다.

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

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

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

디 바운스의 마지막 부분이 달성하려는 목표를 이해하는 것이 중요하다는 것을 알았습니다. 또한 _.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    |
+--------------+-------------------+-------------------+

사용 사례 별 설명 :

• 검색 창-사용자가 키를 누를 때마다 검색하고 싶지 않습니까? 사용자가 1 초 동안 입력을 중단했을 때 검색하고 싶습니다. 사용 debounce키 누름에 1 개 초.

• 슈팅 게임- 권총은 각 샷 사이에 1 초의 시간이 걸리지 만 사용자는 마우스를 여러 번 클릭합니다. throttle마우스 클릭시 사용 하십시오.

그들의 역할을 역전 :

• 검색 창에 1 초를 조절 - 만약 사용자 유형 abcdefghij의 모든 문자 0.6 sec. 그런 다음 처음 a누를 때 스로틀이 트리거됩니다 . 다음 1 초 동안 모든 프레스를 b무시합니다. 즉 .6 초에서는 무시됩니다. 그런 다음 c1.2 초에 다시 트리거되어 시간이 다시 재설정됩니다. 따라서 d무시되고 e트리거됩니다.

• 1 초 동안 권총 제거하기- 사용자가 적을 보았을 때 마우스를 클릭했지만 쏘지 않습니다. 그는 그 초에 여러 번 다시 클릭하지만 쏘지 않을 것입니다. 총알이 여전히 총알을 가지고 있는지 확인할 것입니다. 그 시점에서 (마지막 클릭 후 1 초) 권총이 자동으로 발사됩니다.

제한 은 시간이 지남에 따라 함수를 호출 할 수있는 최대 횟수를 강제합니다. "이 기능은 100 밀리 초마다 최대 한 번 실행"과 같이

Debouncing 은 함수가 호출되지 않고 일정 시간이 지날 때까지 함수가 다시 호출되지 않도록합니다. "이 함수를 호출하지 않고 100 밀리 초가 지난 경우에만 실행"과 같이

심판

스로틀 (1 초) : 안녕하세요, 저는 로봇입니다. 당신이 계속 핑을하는 한, 나는 당신과 계속 대화 할 것이지만, 정확히 1 초 후에 말입니다. 1 초가 지나기 전에 답장을 보내달라고해도 정확히 1 초 간격으로 답장합니다. 다시 말해, 나는 정확한 간격으로 답장하는 것을 좋아합니다.

디 바운스 (1 초) : 안녕하세요, 저는 로봇 사촌입니다. 당신이 계속 핑을하는 한, 나는 당신이 마지막으로 핑한 이후 1 초가 지난 후에 만 답장을하기 때문에 침묵을 지킬 것 입니다. 태도 문제가 있거나 사람들을 방해하고 싶지 않기 때문에 모르겠습니다. 다시 말해, 마지막 호출 이후 1 초가 지나기 전에 응답을 계속 요청하면 응답을받지 못할 것입니다. 그래 그래 ... 무례하다고 불러

스로틀 (10 분) : 나는 로깅 머신입니다. 정기적 인 10 분 후에 시스템 로그를 백엔드 서버로 보냅니다.

디 바운스 (10 초) : 안녕하세요, 나는 그 로깅 기계의 사촌이 아닙니다. (모든 가상의 디 바운서 가이 가상 세계 의 스로틀 러 와 관련이있는 것은 아닙니다 ) 근처 식당에서 웨이터로 일합니다. 주문에 물건을 계속 추가하는 한 주문을 실행하기 위해 부엌에 가지 않을 것입니다. 주문을 마지막으로 수정 한 후 10 초가 경과 한 경우에만 주문이 완료된 것으로 가정합니다. 그래야만 부엌에서 주문을 실행할 것입니다.

쿨 데모 : https://css-tricks.com/debouncing-throttling-explained-examples/

웨이터 비유에 대한 크레딧 : https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

수신 거부를 사용하면 기능이 수신 할 수있는 호출 빈도를 관리 할 수 ​​있습니다. 특정 함수에서 발생하는 여러 호출을 결합하여 특정 시간이 만료되기 전에 발생하는 반복 호출을 무시합니다. 기본적으로 수신 거부는 여러 번 발생할 수있는 이벤트에 대해 정확히 하나의 신호가 전송되도록합니다.

스로틀 은 함수가받는 호출 빈도를 고정 된 시간 간격으로 제한합니다. 대상 함수가 지정된 지연보다 자주 호출되지 않도록하는 데 사용됩니다. 조절은 반복 이벤트 비율의 감소입니다.

간단 해.

스로틀 이 호출되는 동안 랩 기능을 주기적으로 실행하고 디 바운스 가 발생하지 않는다는 점을 제외하고는 똑같은 일 (속도 제한)을 수행합니다 . 디 바운스는 맨 끝에 함수를 한 번만 호출합니다.

예 : 스크롤하는 경우 스로틀은 스크롤하는 동안 (X 밀리 초마다) 함수를 천천히 호출합니다. 디 바운스는 스크롤을 마치고 함수를 호출 할 때까지 기다립니다.

평신도의 관점에서 :

제거 하면 함수 가 여전히 자주 호출 되는 동안 함수가 실행 되지 않습니다. 디 바운스 된 함수 는 더 이상 호출되지 않는 것으로 확인 된 후에 만 실행되며이 시점에서 정확히 한 번 실행됩니다. 탈퇴의 실제 예 :

• 사용자가 "입력을 중지"한 경우 텍스트 필드의 내용을 자동 저장 또는 유효성 검사

• 사용자가 마우스를 놓은 위치에 기록 : 사용자가 더 이상 마우스를 움직이지 않으므로 (마지막) 위치를 기록 할 수 있습니다.

조절 기능은 통화 빈도에 관계없이 최근에 기능이 실행 된 경우 기능이 실행되지 않도록합니다. 조절의 실제 예 :

• v-sync 구현은 조절을 기반으로합니다. 마지막 화면 그리기 이후 16ms가 경과 한 경우에만 화면이 그려집니다. 화면 새로 고침 기능을 몇 번이나 호출하더라도 16ms마다 최대 한 번만 실행됩니다.

개인적으로 기억하는 데 도움이되는 실제 비유 :

• debounce = 대화 . 답장을하기 전에 상대방이 말하기를 기다립니다.
• 스로틀 = 드럼 비트 . 간단한 4/4 드럼 비트에서만 음표를 연주합니다.

디 바운스 사용 사례 :

• 타자. 사용자가 입력을 중지 한 후 무언가를하려고합니다. 마지막 키 입력 후 1 초를 기다리는 것이 좋습니다. 키를 누를 때마다 대기가 다시 시작됩니다.
• 생기. 사용자가 마우스를 올려 놓은 후 요소를 축소하려고합니다. 디 바운스를 사용하지 않으면 커서가 "핫"영역과 "콜드"영역 사이에서 의도하지 않게 움직이는 결과로 불규칙한 애니메이션이 발생할 수 있습니다.

스로틀 사용 사례 :

• 스크롤. 스크롤에 반응하고 싶지만 계산의 양을 제한하므로 100ms마다 무언가를 수행하는 것이 잠재적 지연을 방지하기에 충분합니다.
• 마우스 이동. 스크롤과 동일하지만 마우스 이동을위한 것입니다.
• API 호출 특정 UI 이벤트에서 API 호출을 실행하려고하지만 서버에 과부하가 걸리지 않도록하는 API 호출 수를 제한하려고합니다.

throtle 주변 단지 래퍼 디 바운스 하게 디 바운스가 통과를 호출 할 function경우, 일정 기간에 디 바운스가 큰 다음에 지정된 시간의 기간에 함수 호출 지연 throtle은 .

lodash 도서관은 다음과 같은 기사 제안 https://css-tricks.com/debouncing-throttling-explained-examples/을 차이점을 설명하는 자세한있는 Debounce및 Throttle그들의 개시를

조절

스로틀 링은 초과 근무를 호출 할 수있는 최대 횟수를 강제합니다. "이 기능은 100 밀리 초마다 최대 한 번 실행"과 같이 정상적인 상황에서는이 함수를 10 초에 1,000 번 호출한다고 가정하십시오. 100 밀리 초당 한 번만 조절하면 최대 100 회만 해당 기능을 실행합니다.

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

수신 거부

Debouncing은 함수가 호출되지 않고 일정 시간이 지날 때까지 함수가 다시 호출되지 않도록합니다. "이 함수를 호출하지 않고 100 밀리 초가 지난 경우에만 실행"과 같이

아마도 함수는 빠른 버스트에서 1,000 번 호출되고 3 초에 걸쳐 분산 된 다음 호출이 중지됩니다. 100 밀리 초로 디 바운스 한 경우, 버스트가 끝나면 3.1 초에 한 번만 실행됩니다. 버스트 중에 함수가 호출 될 때마다 디 바운싱 타이머가 재설정됩니다.

출처 :- 스로틀 및 디 바운싱

이벤트 "E"에서 호출 될 콜백 함수 "cb"가 있다고 가정하십시오. "E"가 1 초에 1000 번 트리거되도록하므로 "cb"에 대해 1000 번의 호출이 발생합니다. 그것은 1 호출 / ms입니다. 최적화하기 위해 다음 중 하나를 사용할 수 있습니다.

• 스로틀 링 : (100ms)의 스로틀 링으로 "cb"는 [100ms, 200thms, 300th ms, ... 1000ms]에서 호출됩니다. 1 회 / 100ms입니다. 여기서 "cb"에 대한 1,000 개의 호출이 10 개의 호출에 최적화되었습니다.
• 디 바운싱 (이 100ms)의 디 바운싱으로, "CB는"[1,100번째 초]에 한 번만 호출 될 것이다. [1000th ms]에 발생한 "E"의 마지막 트리거 이후 100ms입니다. 여기서 "cb"에 대한 1,000 개의 호출이 1 개의 호출에 최적화되었습니다.

내가 아는 한, Throttling이라는 간단한 용어로 특정 횟수만큼 setInterval (callback)을 호출하는 것과 비슷합니다. 즉, 이벤트 발생 및 시간이 지남에 따라 특정 횟수 동안 동일한 함수를 호출하는 것과 유사합니다. Debouncing-setTImeout (callbackForApi)을 호출하는 것과 유사합니다. 또는 이벤트 발생시 일정 시간이 지난 후 함수를 호출합니다. 이 링크는 helpful- 수 있습니다 https://css-tricks.com/the-difference-between-throttling-and-debouncing/