节流和防抖

节流：一段时间内，只执行一次某个操作，过了这段时间，还有操作的话，继续执行新的操作
使用场景：
1）页面滚动加载：在无限滚动的页面中，滚动事件会频繁触发，使用节流可以控制数据加载的频率，防止短时间内多次加载数据，提高页面加载性能
2）按钮防重复点击：当用户点击按钮执行某个操作时，使用节流可以确保按钮在一定时间内只能触发一次，防止用户重复点击造成误操作。

<div class="box" style="width: 100px;height: 100px;background: skyblue" draggable="true"></div>
<script>
// 节流: 一段时间内, 只执行一次某个操作,过了这一段时间,还有操作的话 继续执行新的操作
function throttle(fn){
   let timer = null;
   return function(){
       if(timer){
           return;
       }
       timer = setTimeout(()=>{
           fn();
           timer = null;
       },200)
   }
}

const boxDom = document.querySelector('.box');
boxDom.addEventListener('drag',throttle(function(e){
   console.log('drag===========');
}))
</script>

防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
使用场景：
1）搜索框实时搜索：在搜索框中输入关键词时，防抖可以延迟请求发送，只在用户输入完成或者停顿一段时间后才触发实际的搜索请求，避免频繁的网络请求。
2）窗口大小调整：当用户调整浏览器窗口大小时，窗口大小变化事件会连续触发，使用防抖可以确保只在用户完成调整后再执行相应的响应逻辑，以避免过多的布局计算。

    function debounce(fn,delay){
        let timer = null;
        return function(){
            clearInterval(timer);
            timer = setTimeout(()=>{
                fn.apply(this,arguments);
            },delay)
        }
        

    }    
    const inputDom = document.querySelector('.ipt');
    // inputDom.addEventListener('input', function(){
    //     console.log('wwwwwwwwwwww0');
    // })
    inputDom.addEventListener('input', debounce(function(e){
        console.log('this---',this);
        console.log('e---',e);
        console.log('发送搜索请求')
    },500))

防抖和节流在不同的应用场景中展现出其重要性。防抖适用于需要等待用户操作完成或者停顿后才进行相应处理的情况，如搜索框实时搜索和窗口大小调整。节流则适用于需要限制事件触发频率的情况，如页面滚动加载和按钮点击。根据具体需求，选择合适的技术可以优化用户体验、减少不必要的资源消耗，从而提升前端应用的性能。

节流和防抖

推荐阅读更多精彩内容