节流原理

就是防止函数高频次的触发，在同一时间段内，只能允许触发一次

比如在我们鼠标滑动的情境下

最简单的方式就是开启一个定时器（如下）：

    <script>
        window.addEventListener('scroll',throttle(function(){
            //判断距离window的滚动距离
        },1000))

        function throttle(callback,interval=300){
            let flag=false
            return function(){
                if(flag)return;//如果还在代码还在执行，就忽略本次触发
                flag=true  //更改标志处
                //添加一个计时器
                setTimeout(()=>{
                    callback.apply(this)
                    flag=false   //若执行完毕，就还原标志位
                },interval)
            }
        }
    </script>

> 如果在vue3中我们可以这样写

<script setup>
    //引入前面的js节流代码
   import {throttle} from '***'
   const **=throttle(function(){
    //写下你所需要的代码
})

防抖原理

就是防止因抖动产生的不必要函数触发，而浪费性能，当抖动结束时，再执行函数

比如在我们表单输入中，就是最直接的防抖案例 防抖最直接的就是打断之前的，从而重新计时，从而避免造成性能浪费，造成环境污染，

        // 使用回调函数  让其可复用
        _input.addEventListener('input', debounce(function () {
            ajax(this.value)  //执行请求
        }))

        // 使用闭包
        function debounce(callback) {
            // 定义为全局变量
            let timer = null
            return function () {
                clearTimeout(timer)  //关闭定时器
                timer = setTimeout(() => {
                    //重新计时
                    callback.apply(this)
                }, 1000)
            }
        }

在vue3中的使用也是和之前的那个类似

<script setup>
    //引入前面的js防抖代码
   import {debounce} from '***'
   const **=throttle(function(){
    //写下你想实现的代码 
})

防抖和节流的对比：

防抖：如果函数连续触发，则计时器不停的重新计时，最后只有一次会最终执行，如同回城次数较少

节流：如果函数连续触发，则会有大量的触发失效，最终执行的频率大幅降低，从而提高性能，如同技能的冷却时间次数比防抖多

好了，我也是这个这个行业的新人，会有很多不清楚的，欢迎指出我的错误，我也想在这一行混口饭吃~~ 如果对我感兴趣的话，就关注我吧，我们可以一起交流