Vue的防抖(按钮，表单) - 亲测可用

1. 防抖

在 utils目录下封装 debounce.js :

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

使用 debounce.js。

debounce.vue:

<template>
    <div>
        <input type="text" @input="debounceInput($event)"> <br/>
        <button @click="clickMe()">点我啊</button>
    </div>
</template>

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

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

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

参考博客

VUE防抖与节流的最佳解决方案-函数式组件