防抖，节流整体思路

防抖整体思路：

1、事件函数执行 首先创建一个定时器

2、把逻辑代码写在定时器里

3、当函数再次触发清除定时器

4、再创建一个新的定时器

function debounce(fn, t) {
    let timeId
    return function () {
      // 如果有定时器就清除
      if (timeId) clearTimeout(timeId)
      // 开启定时器 200
      timeId = setTimeout(function () {
        fn()
      }, t)
    }
  }

节流整体思路：

1、事件执行，先判断是否有定时器，有的话则直接return

2、把逻辑代码放到定时器中，

3、定时器执行后，将定时器变量设置为null

4、下次再触发事件的时候 再创建一个新定时器

function throttle(fn, time) {
      if (timer) {    // 如果定时器还在，说明前一次延迟执行还没有完成
          return ;
      }
      timer = setTimeout(function () {  // 延迟一段时间执行
          clearTimeout(timer);
          fn()
          timer = null;

      }, time );
    }

防抖与节流的区别

防抖一定时间连续触发的事件,只在最后执行一次,

而节流一段时间内只执行一次。可以减少一段时间内事件的触发频率

防抖的应用场景：用户在输入框内连续输入一串字符串时，通过防抖策略，实现在输入完后，再执行查询的请求，有效的减少请求次数，节约请求资源

节流的应用场景： 1、鼠标在连续不断的触发点击事件，只在单位时间内触发一次 2、onresize，scroll，mousemove ,mousehove