防抖和节流 简介

        防抖和节流都是用来控制函数执行频率的技术，可以用来提高性能和优化用户体验。

简介：

1. 防抖（Debounce）：防抖是指在一段时间内多次触发同一个函数时，只执行最后一次触发的函数。应用场景包括输入框搜索、滚动加载等需要控制频率的操作。在实现上，可以通过setTimeout和clearTimeout来实现防抖。

   function debounce(func, delay) {
     let timer;
     return function() {
       clearTimeout(timer);
       timer = setTimeout(() => {
         func.apply(this, arguments);
       }, delay);
     };
   }
   

2. 节流（Throttle）：节流是指在一段时间内多次触发同一个函数时，按照一定的频率执行函数。应用场景包括滚动事件、resize事件等需要控制执行频率的操作。在实现上，可以通过设置一个定时器来控制函数的执行频率。

   function throttle(func, delay) {
     let timer;
     return function() {
       if (!timer) {
         timer = setTimeout(() => {
           func.apply(this, arguments);
           timer = null;
         }, delay);
       }
     };
   }
   

应用场景：

• 防抖

1. 搜索框实时搜索：用户在输入搜索关键词时，可以使用防抖技术确保只有在用户停止输入一段时间后才触发搜索请求，避免频繁的请求发送。
2. 点击按钮防抖：当用户频繁点击某个按钮时，可以使用防抖技术确保只有在用户停止点击一段时间后才执行相应的操作，避免重复操作。
3. 输入框实时校验：当用户输入内容时，可以使用防抖技术确保只有在用户停止输入一段时间后才进行内容校验，减少校验频率。

• 节流

1. 页面滚动加载：当用户滚动页面时，可以使用节流技术控制触发加载更多内容的频率，避免频繁触发加载操作。
2. 窗口大小变化：当窗口大小发生变化时，可以使用节流技术控制触发相应的操作的频率，避免频繁的操作。
3. 鼠标移动事件：当用户鼠标移动时，可以使用节流技术控制触发相应事件的频率，避免过多的事件触发。
4. 滚动条位置监听：当页面滚动时，可以使用节流技术控制监听滚动条位置的频率，避免频繁的位置变化监听。