Small plugin to throttle form submit handlers



  • I’ve started playing with vuelidate and, following the examples there, I’ve had a toast appearing on vuelidation failures. When spamming the Submit button, multiple toasts would appear, with a lot of delay from the initial click. I didn’t like that, so I wrote a plugin that will throttle all methods in components that have their name starting with “handle”, for example handleSave.

    It’s my first “public” plugin, so I’m also looking for some feedback on the code.

    import { Utils } from 'quasar'
    
    function install (Vue) {
      Vue.mixin({
        beforeCreate () {
          let self = this
          let meths = this.$options.methods
          if (meths) {
            Object.keys(meths).forEach((k) => {
              if (!/^handle.*/.exec(k)) return
              let f = meths[k]
              meths[k] = Utils.throttle(function (...args) {
                return f.apply(self, args)
              }, 2000)
            })
          }
        }
      })
    }
    
    const inBrowser = typeof window !== 'undefined'
    
    if (inBrowser && window.Vue) {
      install(window.Vue)
    }
    
    export default {
      install
    }
    


  • On the other hande, I’ve initially tried to use Utils.debounce instead of Utils.throttle, but from my testing, the function would be called only after the initial configured timeout expired.


Log in to reply
 

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