Debounce computed properties/getters in Vue

Question

I can\'t seem to debounce (lodash) computed properties or vuex getters. The debounced functions always return undefined.

https://jsfiddle.net/guanzo/yqk0jp1j/2/

Answer 1

1. Simple
2. No external dependencies (like _.debounce)
3. Tailored for Vue

import Vue from 'vue'

// Thanks to https://github.com/vuejs-tips/v-debounce/blob/master/debounce.js
function debounce(fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

function debouncedProperty(delay) {
  let observable = Vue.observable({ value: undefined });
  return {
    get() { return observable.value; },
    set: debounce(function (newValue) { observable.value = newValue; }, delay)
  }
}

// component
export default {
  computed: {
    myProperty: debouncedProperty(300),
  },
}