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毫秒內沒有再觸發事件時，事件處理函數才會執行一次。