zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.js メソッドにlodashのdebounceやthrottleを使用する

Vue.jsのコンポーネント内のあるメソッドにdebouncethrottleを使用して、メソッドを発生させるタイミングを制御したい場合があります。

lodashdebouncethrottleを使用した例を紹介します。

以下のようにメソッド自体をdebouncethrottleで囲います。

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

関連記事