面试题-防抖和节流

防抖

函数在高频触发n秒后只执行一次为防抖，如果n秒内持续触发，则重新开启计时

使用场景：一般多用于用户搜索，以及超高频点击太快压力服务器的情况

思路: 每次触发时都取消之前的延时方法，当最后一次触发大于执行时间后函数执行

function antiShake(fn, ...args) {
    let timer = null;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, 500);
    };
  }
  function sayHi(...args) {
    console.log(...args);
    console.log("防抖成功");
  }
  document
    .getElementById("demo")
    .addEventListener("click", antiShake(sayHi, 1, 2));
    

节流

高频触发时，函数n秒执行一次，稀释函数调用次数

使用场景： 滚动加载，滚动到底部后过量请求，超频点击按钮等等...

思路：树立旗帜，一旦被调用，旗帜立起，拦截过量请求，延时函数执行完毕后，拉倒旗帜，接受请求。

 function throttle(fn, ...args) {
    let flag = false;
    return function () {
      if (flag) return;
      flag = true;
      let timer = setTimeout(() => {
        fn.apply(this, args);
        flag = false;
      }, 1000);
    };
  }
  function Hello() {
    console.log("节流成功");
  }
  document
    .getElementById("demo")
    .addEventListener("click", throttle(Hello));