Debounce trouble



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


  • @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”.



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


  • Admin

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

  • Admin

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



  • 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>
    

  • Admin

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


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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.