1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

_.debounce と _.throttle は何が違うのか

Posted at

Vue.js 公式ガイドにて学習をしていたところ、lodash_.debounceを使っている箇所があり、
以下のように記載されていた。


    // _.debounce (とその親戚である _.throttle )  についての詳細は
    // https://lodash.com/docs#debounce を見てください。
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)

参考URL先のドキュメントを読んでみたのですが
_.debounce_.throttleの違いがいまいち分からず(英語苦手....)

挙動としては以下の感じの実装です。(ソースはこちら)
ezgif.com-gif-maker.gif

文字を連続で入力したときにgetAnswerの関数が何度も呼ばれないようにしているみたいです。


調べてみると以下の違いのようでした。
  • _.debounce:連続して呼び出しても指定された時間以内なら処理は実行しない
  • _.throttle:連続して呼び出しても指定された時間以内に1回しか実行しない

なるほど...(わからん)

ということでどっちも実装して違いを見てみました。

_.debounceの場合

以下のように実装。
(2000ミリ秒で設定)

this.debouncedGetAnswer = _.debounce(this.getAnswer, 2000)

これで一定の間隔で文字を入力してみます。

ezgif.com-gif-maker (2).gif

入力する間隔が2000ミリ秒以内だとgetAnswerの処理が呼ばれない
=**「連続して呼び出しても指定された時間以内なら処理は実行しない」**

_.throttleの場合

以下のように実装
(2000ミリ秒で設定)

this.debouncedGetAnswer = _.throttle(this.getAnswer, 2000)

こちらも先程と同じ間隔くらいで文字を入力してみます。

ezgif.com-gif-maker (1).gif

連続して入力しても2000ミリ秒に1回しかgetAnswerの処理が呼ばれない
=**「連続して呼び出しても指定された時間以内に1回しか実行しない」**


...ということでやっと違いが理解できました! やはり実際に動かすだけで頭に入りますね。
ちなみに`lodash`を`_`としてるのは `lodash` = `low(低い) + dash(-)` = `_`だからとかそんな理由らしいです。
引き続き勉強がんばります。
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?