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),
},
}