简单实现节流防抖函数

<template>
    <div>
        节流，
        使用场景：1.频繁点击的跳转、提交按钮
                 2.游戏技能CD
        <button @click="clickBtn">节流按钮(在规定时间内，执行一次，平均)</button>
    </div>
    
</template>
<script>
function throttle(fn,wait){
    // let oldTime=0
    // return function(){
    //     if(oldTime==0||oldTime){
    //         let newTime = new Date().getTime()
    //         if(newTime-oldTime>wait){
    //             oldTime = newTime
    //             fn.apply(this)
    //         }
    //     }
    // }

    //定时器版本
    let time = null
    return function(){
        if(!time){
            time=setTimeout(() => {
                time=null
                fn.apply(this)
            }, wait);
        }
    }
    
}
export default {
    data () {
        return {
            
        }
    },
    methods: {
        clickBtn:throttle(function(){
            console.log("使用节流，在规定时间内只执行了第一次，成功执行了函数");
        },5000),
        
    }
}
</script>

<template>
    <div>
        防抖
        应用场景：1.input输入框验证电话号码之类的，当输入完成之后在进行验证
                 2.搜索框搜索使用防抖减少网络请求
        <button @click="handleBtn">防抖按钮(在规定时间内，重复点击会让定时器重新计时，只执行最后一次,间隔时间完成才会执行函数)</button>
    </div>
</template>
<script>
function deBounce(fn,wait) {
    let time = null
    return function(){
        if(time) {
            clearTimeout(time)
            time = null
        }
        time = setTimeout(()=>{
            fn.apply(this)
            clearTimeout(time)
            time=null
        },wait)
    }
    

}
export default {
    methods: {
        handleBtn:deBounce(()=>{
            console.log(123);
        },200)
    }
}
</script>