Vue.js メソッドにlodashのdebounceやthrottleを使用する
Vue.js
のコンポーネント内のあるメソッドにdebounce
やthrottle
を使用して、メソッドを発生させるタイミングを制御したい場合があります。
lodash
のdebounce
やthrottle
を使用した例を紹介します。
以下のようにメソッド自体をdebounce
やthrottle
で囲います。
import { throttle, debounce } from 'lodash';
export default {
methods: {
debounceSample: debounce(function debounceSample(e) {
console.log('debounce');
}, 500),
throttleSample: throttle(function throttleSample(e) {
console.log('throttle');
}, 500),
},
}