如何手写防抖代码

防抖的意义：

防止重复操作、执行函数，用户一直触发某个函数，触发的时间间隔如果小于设定的时间间隔，则只执行1次；
如果不使用JavaScript防抖函数，当用户在短时间内频繁触发事件时，事件处理函数将会被频繁调用，可能会导致以下问题：
1、性能问题：频繁调用事件处理函数会占用大量的CPU资源，导致页面响应变慢，甚至崩溃。
2、不必要的网络请求：如果事件处理函数用于发送网络请求，频繁调用可能会导致发送不必要的请求，从而浪费网络带宽和服务器资源。
3、不必要的计算：如果事件处理函数执行复杂的计算，频繁调用可能会导致不必要的计算，从而浪费CPU资源。
4、用户体验问题：频繁调用事件处理函数可能会导致页面出现闪烁、卡顿等不良的用户体验。

因此，使用JavaScript防抖函数可以有效地避免这些问题，优化页面性能，提高用户体验。

<button id="btn1">防抖</button>

    var btn1 = document.querySelector("#btn1");
    function debounce(fn, delay){
        var timer = null;
        return function(){
            clearTimeout(timer);
            timer = setTimeout(()=>{
                fn();
            }, delay);
        }
    }

    function handleBtn1(){
        console.log("请求接口");
    }


    btn1.onclick = debounce(handleBtn1, 2000);