Debounce

前のイベントを呼び出した後、指定した時間後にイベントを実行します.Debounceは、自動完了機能を実現するために有効である.

Debonseのinputラベルが適用されていません

上の画像から、入力するたびにイベントが発生し、計8回出力されていることがわかります.要求がコンソールに印刷されるのではなく、サーバに送信されるAPI Call要求であれば、わずかなユーザのみが使用すれば問題はありませんが、複数のユーザが接続して要求をサーバに送信している場合は、問題は言うまでもありません.

サンプルコード

lodashライブラリが提供するdebonseは、実行する関数と時間(ms)をパラメータとして使用します.

import _ from 'lodash'

const DebounceExample = () => {
  const callApi = () => {
    // call api
  }
  const throttleCallApi = _.debounce(callApi, 100);
}

debonseのinputラベルを適用する

その結果,最後の入力が終了すると100ミリ秒後に出力されることが分かった.

Throttle

指定した時間内に発生するすべてのイベントをブロックし、1つのイベントのみを実行します.

throttleの入力ラベルが適用されていません

throttleが適用可能な例については、Infinite Scrollが考えられる.通常、Infinite Scrollでは、AjaxリクエストがonScrollイベントに割り当てられます.ただし、この場合、Ajaxリクエストはスクロールするたびに発生します.
これはサーバ/クライアントにとって負担になるため、Ajaxリクエストの数を減らすことを考慮する必要があります.
この場合、throttleを使用することが好ましい.

Example

import _ from 'lodash'

const ThrottleExample = () => {
  const callApi = () => {
    // call api
  }
  
  const throttleCallApi = _.throttle(callApi,1000);
}

throttleの入力ラベルが適用されました

画像から見ると、同じ「throttle」という言葉が入力されていても、100 msごとに2回実行されます.

DeboringとThrottleの違い

debounceとthrottleは運転時間の最大の差と言える.
dbオンスは、最後の入力が終了した後に1時間設定する必要がありますが、throttleは最初のイベントが発生した後に設定した時間後に実行されます.
これらの実行ポイントの違いは、実現したい機能に応じて区別して使用する必要があるため、理解と使用が重要です.