Vue的防抖(按钮，表单)

在 utils目录下封装 debounce.js :

let timeout = null
function debounce(fn, wait) {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
}
export default debounce

debounce.vue使用 debounce.js。(test)

<template>
    <div>
        <button @click="clickMe()">点我啊</button>
    </div>
</template>

<script>
import debounce from './../../utils/debounce.js'
export default {
    data () {
        return {
            
        }
    },
    methods: {
        clickMe(){
            debounce(() => {
                console.log('触发')
            }, 1000)
        },
    }
}
</script>

防抖原理：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次。

比如1000毫秒内没有再触发事件时，事件处理函数才会执行一次。