If you are listening to changes on an Event (DOM Events) to execute any side effects like performing network requests, you'd probably want to "debounce" your attached function executions.
This is an alternative to lodash.debounce
but "vanilla js" packed as
a Vue SFC to import
it as a
mixin.
The default debouncing time is 300ms
.
By default each time it's invoked it creates a setTimeout reference that will be cleared when the component is destroyed to prevent memory leaks.
npm i -S gist:360b782e6f3e3e6667826fc65f420d22
<script>
import simpleDebounce from 'simple-debounce-vue-mixin'
// ...
export default {
mixins: [simpleDebounce],
methods: {
inputHandler($event) {
this.simpleDebounce(() => {
// do something here with `$event`...
// like fetching auto-complete values...
// or updating internal model...
}, 350 /* optional debounce time: default is 300 */)
}
}
}
</script>