Edited at

lodashの_.throttleと_.debounceの使用例

More than 1 year has passed since last update.

とあるイベントを発火後、5秒間は同じイベントを発火したくない。そんな処理をjavascriptで実装したくて、調べていたら、lodashに便利そうなのがあったので、実際に触ってみたいと思います。


使用ライブラリ

デモを触っていただければ、なんとなく感覚がつかめるかと思います。


_.throttle


基本の形

_.throttle(func, [wait=0], [options])


連続で何回も実行しようとしても、wait/1000秒に1回だけしかfuncを呼び出すことができないようにすることが可能です。


使用例


html

<input type="text" id="inputThrottle">

<div id="consoleThrottle"></div>


js

function eventThrottle() {

$('#consoleThrottle').append('keypressed<br>')
}

$('#inputThrottle').on('keypress', _.throttle(eventThrottle, 1000))


#inputThrottlekeypressをtriggerにし、_.throttleをかませてeventThrottleを実行します。_.throttleをかませているので、eventThrottleは最大で1秒に1回しか実行されません。


_.debounce


基本の形

_.debounce(func, [wait=0], [options])


最後に実行されたwait/1000秒後に初めてfuncが呼び出されます。


使用例


html

<input type="text" id="inputDebounce">

<div id="consoleDebounce"></div>


js

function eventDebounce() {

$('#consoleDebounce').append('keypressed<br>')
}

$('#inputDebounce').on('keypress', _.debounce(eventDebounce, 1000))


#inputDebouncekeypressをtriggerにし、_.debounceをかませてeventDebounceを実行します。_.debounceをかませているので、eventDebounceは最後にkeypressされてから1秒後に実行されますので、最大で1秒に1回しか実行されません。


注意

_.throttle_.debounceは関数を返すので、次のようなコードでは動作しません。


js

$('#input').on('keypress', function(){

_.debounce(eventA, 500)
})


その他

その他のオプションなどについては公式サイトを参照してください。