Vue debouncing #vuejs #vue.js #debounce #throttle #throttling

Debouncing.vue

<template>
    <div v-loading="loading">
        <textarea v-model="text"></textarea>
        {{ saving ? 'saving...' : '✓' }}
    </div>
</template>
<script>
export default {
    data: () => ({
        text: '',
        saving: false,
        saveTimer: null,
    }),
    methods: {
        async save () {
            this.saving = true
            this.saveTimer && clearTimeout(this.saveTimer)
            this.saveTimer = setTimeout(() => {
                this.$http.post('/some-url', { text: this.text })
                this.saving = false
            }, 1000)
        },
    },
    watch: {
        text (val) { this.save() },
    },
}
</script>