防抖

防抖（Debounce）指的是触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。防抖顾名思义是防止抖动，先抖着，什么时候不抖了，什么时候执行,注重的是结果。

使用场景：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。

代码演示：

<input type="text" id="input">
<script>
 const debounce = function(fn, delay) {
      let timer = 0
      return function() {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          fn.apply(this, arguments)//透传this
          timer = 0
        }, delay)
      }
    }
    const input = document.getElementById('input')
    input.addEventListener('keyup', debounce(() => {
      console.log('输入结果',input.value)
    }, 300))
 </script>

节流

节流（throttle）指的是事件触发期间，不管事件的触发频率有多高，只会间隔设定的时间执行一次目标函数。简单来说：每隔单位时间，只执行一次。节流，节省交互沟通。流，不一定指流量，注重的是频率。

使用场景：滚动加载更多、搜索框搜索联想功能、高频点击、表单重复提交……

代码演示：

 <div id="item" draggable="true" style="width:100px;height: 50px;cursor: move;background-color: aqua;">可拖拽div</div>
  <script>
    const throttle = function(fn, delay) {
      let timer = 0
      return function(){
        if (timer) return
        timer = setTimeout(() => {
          fn.apply(this, arguments) //透传this
          timer = 0
        }, delay)
      }
    }
    const item = document.getElementById('item')
    item.addEventListener('drag',throttle((e)=>{
      console.log('鼠标的位置',e.offsetX,e.offsetY)
    },100))
  </script>

防抖和节流的区别以及使用场景

节流:限制执行频率，有节奏的执行
防抖:限制执行次数，多次密集的触发只执行一次
节流关注“过程”
防抖关注“结果
实际工作可使用lodash

js之防抖节流

防抖

节流

防抖和节流的区别以及使用场景