Vue3 typescript debounce

1 개요

Vue3 typescript debounce

2 vue 구현

<script setup lang="ts">
import { debounce } from 'lodash'
</script>
<script lang="ts">
export default defineComponent({
    data() {
        return {
            search: debounce(() => {}),
        }
    },
    created() {
        this.search = debounce(this._search, 500)
    },
    methods: {
        _search(event: Event) {
            const target = event.target as HTMLInputElement
            console.log(target.value)
            // axios.get...
        }
    }
})
</script>
<template>
    <input type="search" @input="search">
</template>

3 debounce 직접 구현

• lodash를 사용하지 않고 debounce를 직접 구현한다면...

export default function debounce(fn: Function, wait: number) {
    let timer: ReturnType<typeof setTimeout>
    return (...args: any[]) => {
        clearTimeout(timer)
        timer = setTimeout(() => fn(...args), wait)
    }
}

4 같이 보기

• debounce

5 참고

• https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940