防抖-节流-库

防抖函数和节流函数

认识防抖debounce函数

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

防抖函数的案例

 ◼ 我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容：
◼ 比如想要搜索一个MacBook：
当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网
络请求；
当继续输入ma时，再次发送网络请求；
那么macbook一共需要发送7次网络请求；
这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;
 ◼ 但是我们需要这么多次的网络请求吗？
不需要，正确的做法应该是在合适的情况下再发送网络请求；
比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；
◼ 这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

可以使用underscore 库里面的防抖函数

案例:

    <input type="text">
    <!-- 使用 underscore 库-->
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/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)