1、防抖

什么叫防抖？

防抖 =》多次操作只执行最后一次操作

防抖是游戏的回城卷轴，多次点击最后一次才有效。节流是英雄技能。

    <h2>深入js防抖和节流</h2>
    <input type="text" placeholder="请输入电话" />
    <script>
      // 防抖 => 将多次操作变成一次  类似游戏中的回城卷轴多次点击只有最后一次有效
      let telInput = document.querySelector('input')
      telInput.addEventListener('input', (e) => {
        console.log('发起请求')
      })
    </script>

随着input框里面内容的输入只要发生改变，就会执行一次发起请求。

我们希望能够达到在一定时间内的输入信息结束后再进行一个发起监听请求，这就是所谓的防抖。

    <h2>深入js防抖和节流</h2>
    <input type="text" placeholder="请输入电话" />
    <script>
      // 防抖 => 将多次操作变成一次  类似游戏中的回城卷轴多次点击只有最后一次有效
      let telInput = document.querySelector('input')
      telInput.addEventListener('input', antiShake(demo, 2000))

      // 防抖封装
      function antiShake(fn, wait) {
        let timeOut = null //定时器初始状态为空 null
        return (args) => {
          // 定时器开启了 则清除定时器
          if (timeOut) clearTimeout(timeOut)  

          // 如果定时器没开始创建一个定时器
          timeOut = setTimeout(fn, wait)  //如果没有计时器
        }
      }

      // 模拟数据请求的方法
      function demo() {
        console.log('发起请求')
      }
    </script>

这样在2s内只要复选内的内容没有最新的变化，则发送一次请求。这就是防抖。相当于游戏的回城卷轴，点击一次回城，只要移动了就失效想再回去必须再点，两秒内不移动变化就会发起回城的请求。否则只要一变化之前的回车就失效。

2、节流

节流 =》一定时间内只调用一次函数

引用场景 =》

提交表单（提交表单的时候有时候会出现卡顿现象，放置用户手残，一直去点就会提交多次，所以限制在几秒钟之内只允许让你提交一次）
高频的监听事件

<h2>深入js防抖和节流</h2>

<div class="box"></div>
<input type="text" placeholder="请输入电话" />
  
// 节流  
let box = document.querySelector('.box')
box.addEventListener('touchmove', (e) => {
   console.log('发起我的请求')
})

这个是未加节流处理的时候，鼠标随便移动就会发起很多很多数据请求。

我们要做的是就是把多个操作变成一个操作。

     // 模拟数据请求的方法
      function demo() {
        console.log('发起请求')
      }

      // 节流
      let box = document.querySelector('.box')
      box.addEventListener('touchmove', throttle(demo, 2000))

      function throttle(event, time) {
        let timer = null //定时器初始状态为空 null
        return function () {
          if (!timer) {
            timer = setTimeout(() => {
              event()
              timer = null
            }, time)
          }
        }
      }

我们会发现加了节流之后，不管你鼠标怎么移动每隔2s发生一次请求，让之前的请求次数变少了。

【web前端面试必问4】JS防抖与节流

1、防抖

猜你喜欢