JS中防抖和节流的实现

前言：

在 JavaScript 中，防抖（debounce）和节流（throttle）是两种常用的性能优化技术，用于控制函数的执行频率，以避免过多的计算或请求。

防抖

防抖是指在一段时间内，多次触发同一函数时，只执行最后一次触发的函数调用。它适用于需要等待用户停止操作后再执行的情况，例如搜索框输入查询。

实现防抖的一种常见方式是使用定时器和事件监听器。当触发事件时，设置一个定时器，在指定的延迟时间后执行函数。如果在延迟时间内再次触发事件，则清除之前的定时器并重新设置新的定时器。

 <input type="text" id="input">
   <script>
    //防抖
    var time=null//time为定时器变量
    var hqinput=document.getElementById("input")
    hqinput.addEventListener("input",()=>{
        //每次触发方法的时候，如果time不为null，清除定时器
        if(time!=null){
            clearInterval(time)
        }
        //重新定义定时器，从头开始计时
        time=setTimeout(()=>{
            console.log(hqinput.value);
        },500)
    })

节流

实现防抖的一种常见方式是使用定时器和事件监听器。当触发事件时，设置一个定时器，在指定的延迟时间后执行函数。如果在延迟时间内再次触发事件，则清除之前的定时器并重新设置新的定时器。

实现节流的一种常见方式是使用时间戳和事件监听器。

<button id="btn">触发按钮</button>
    <script>
        var btn=document.getElementById("btn")
        function Fu(){
            console.log("节流方法已经触发");
        }
        function Jieliu(Fun,time){
        let flag=false
        return function(){ 
            //首次执行方法，flag置为true
            if(!flag){
                Fun()
                flag=true
            }
            //只有当定时器中回调函数执行完，将flag置为false时，才会重新执行方法语句
            setTimeout(()=>{
                flag=false
            },time)
        }
    }
        btn.onclick=Jieliu(Fu,3000)
    </script>