Debounce trouble

kresten

Hi,
I probably did something wrong, but I can’t get the debounce to work. When I’m calling someFunction it doesn’t log ‘save’ at all. This is most of the code I’m using to test. I’m calling someFunction with the @input of the range component. This works as ‘range changed’ does show in the console.

methods: {
  someFunction: function () {
    console.log('range-changed')
    Utils.debounce(function () {
      console.log('save')      
    }, 300)
  }
}

afd

@kresten I’ve posted this small plugin, that does something similar: http://forum.quasar-framework.org/topic/283/small-plugin-to-throttle-form-submit-handlers

It will automatically limit the rate at which you can handle some button click on all component methods that start with “handle”.

talski

Same here, I can’t make it work, using quasar 0.14

rstoenescu

import { debounce } from 'quasar'

..... debounce(() => { console.log('save') }) ....

rstoenescu

or import { throttle } from 'quasar' depending if you need a throttle or a debounce…
debounce docs
throttle docs

talski

I’ve already imported it, but it doesn’t work, I’m missing something? this only outputs resizing

<script>
import {
  debounce,
  QResizeObservable,
  ......
} from 'quasar'

import isotope from 'vueisotope'

export default {
  name: 'app',
  components: {
    isotope,
    QResizeObservable,
    ......
  },
  data () {
    return {
      ......
  },
  methods: {
    ......
    onResizeMasonry: () => {
      console.log('resizing')

      debounce(() => {
        console.log('updating')
        this.$refs.devicesMasonry.iso._requestUpdate()
      }, 500)
    }
  }
}
</script>

rstoenescu

Yes, and I’ve overlooked it too when I answered (I’m always in a hurry, sorry)
debounce() and throttle() return a function. They do NOT call the function. You have to call the returned function whenever you need it.

So what you need to do is store the result of the debounce() call and call that function. Long story short, this will do:

methods: {
  onResizeMasonry: () => {
    console.log('resizing')
    this.debouncedFunction()
  }
},
mounted () {
  // we create the debounced function
  this.debouncedFunction = debounce(() => {
    console.log('updating')
    this.$refs.devicesMasonry.iso._requestUpdate()
  }, 500)
}

talski

my fault, didn’t noticed it in the docs, Returns a function...

No More Posting New Topics!

Debounce trouble