防抖函数和节流函数

认识防抖debounce函数

◼ 我们用一副图来理解一下它的过程：
  当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
  当事件密集触发时，函数的触发会被频繁的推迟；
  只有等待了一段时间也没有事件触发，才会真正的执行响应函数；
防抖的应用场景很多：
➢输入框中频繁的输入内容，搜索或
者提交信息；
➢频繁的点击按钮，触发某个事件；
➢监听浏览器滚动事件，完成某些特
定操作；
➢用户缩放浏览器的resize事件；
可以使用underscore 库里面的防抖函数

案例:

    <input type="text">
    <!-- 使用 underscore 库-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
      //1.获取inputEl
      const inputEl = document.querySelector("input")
      //监听input的输入
      // let counter = 1
      // inputEl.oninput=function(){
      //   console.log("发送网络请求",counter++,this.value)
      // }
      //防抖处理函数
      let counter = 1
      // 使用underscore 库里面的_.debounce防抖函数
      inputEl.oninput=_.debounce(function(){
        console.log("发送网络请求",counter++,this.value)
      },500)