函数防抖、节流以及它们的区别

---

一、函数防抖

函数防抖：防止老年帕金森，用户频繁触发某个行为的时候，我们只识别一次「频繁定义可以自己管控」

防抖 就是每次都会把老的定时器给移除，然后再去重新建立一个新的定时器

防抖的应用场景：一个是按钮连续点击，另一个是input的连续输入

// 第一种
let timer = null;
  btn.onclick = function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fetch("./data.json");
    }, 1000);
  };
  
//第二种
let debounce = (fn, delay) => {
    let timer = null;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.call(this);
      }, delay);
    };
  };
  inp.onclick = debounce(function () {
    console.log(this.value);
    fetch("./data.json");
  }, 1000);

二、函数节流

函数节流：用户频繁操作的时候，不能根据用户的频繁操作渡来决定触发多少次，而是根据设定好的频率进行触发，实现“降频”的效果，相对于防抖来讲，节流是允许触发多次的

节流的应用场景：最多应用在 scroll事件 和 touchmove事件

let throttle = (fn, delay) => {
    let flag = true;
    return function () {
      if (!flag) return;
      flag = false;
      setTimeout(() => {
        flag = true;
      }, delay);
      fn();
    };
  };

防抖节流的区别：

防抖节流的区别：
防抖的目的是为了 让函数虽然会多次执行 但是有效代码只执行一次

节流的目的是为了 让函数虽然会多次执行 但是有效代码只会根据固定频率去执行
防抖是函数的有效代码执行一次，节流是为降有效代码的执行频率