vue3封装防抖与节流，并使用

         防抖和节流主要都是为了优化项目，当我们定义一些函数方法时，有些事件会在短时间内不断的触发，而这时就会造成性能不佳，最经典的可能就是用户后台挂着游览器，而且此时某个网页还在触发同一事件导致卡顿，用户莫名其妙：“电脑坏了？”【doge】..

        以下为自行封装的输入框组件，与防抖节流定时器，可自行开启是否防抖和节流

        （如果有需要的话，后续可以把封装防抖节流输入框组件的过程写出来）

        为了不让事件在短时间内不断的触发，我们需要一个东西去限制其行为，定时器！

        让事件不被大量触发

        防抖：直到用户做完事情后才处理用户最后一次提交的事件

                相当于触发则进入等待重新定时直到事件最后一次触发然后再等时间有没有到，才把这定时器清除

        节流：用户一直在做事，但每次间隔一段时间才触发这件事，常见在滚动时加载的事件

                相当于只在特定时间内只执行一次事件，在特定时间内，再实行这个事件是无效的，直到设置的时间过了后，才执行下一次，然后再在下一次的时间段内怎么执行事件都无效

                

//封装防抖
//新建一个debounce.js文件（一般vue3+ts，也可以用ts）
//新建文件后将以下代码放入
const debounce = (fn, delay) => {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
};
export default debounce;

//封装防抖
//新建一个throttle.js文件（一般vue3+ts，也可以用ts）
//新建文件后将以下代码放入
const throttle = (fn, delay) => {
    let valid = true;
    return function () {
        let context = this;
        let args = arguments;
        if (!valid) {
            return false;
        }
        valid = false;
        setTimeout(() => {
            //console.log('coming');
            //fn();
            fn.apply(context, args);
            valid = true;
        }, delay);
    };
};
export default throttle;


//注意以上是两个文件，嫌麻烦可以放在同一个文件里，不过格式改为
export const debounce = (fn, delay) =>{...}
export const throttle = (fn, delay) =>{...}
//然后把export default都去掉

<script setup>
//vue2的话换个写法就行了qwq
import debounce form ...
//inputSome 为自己定义的事件
const inputSome = debounce(function(){
    //在这里写事件的逻辑代码
    console.log('comeDebounce')
},1000)

import thorttle form ...

const inputSome = thorttle(function(){
    console.log('comeThorttle')
},1000)
</script>