❓什么是防抖和节流？有什么区别？如何实现？

这里我们用一个表格去解答这道题我觉得更加的直观，并且令人记忆深刻。

函数	定义	🌰
防抖(debounce)	规定时间内只会触发一次函数运行，如果再次触发则重置时间	input 搜索框不断输入，只有等 300ms 内不输入才会自动执行搜索函数
节流(throttle)	无论触发多少次一段时间只触发一次函数运行	按钮 300ms 内重复点击多次，但就执行第一次

// 防抖
// 函数的内部定义定时器，每次触发清除之前定时任务，并且开始新的定时任务
function debounce(func, delay = 300) {
  let timer = null; // 创建一个定时器载体变量

  return function() {
    if (timer) clearTimeout(timer); // 如果当下已经有定时器任务，就清除掉

    timer = setTimeout(() => {
      func.apply(this, arguments); // 为了确保这里的this能指向调用者，所以用apply
    }, delay);
  };
}

// 节流
// 函数内部设置开关，第一次调用关闭开关，执行函数，在函数执行之后重置开关
function throttle(func, delay = 300) {
  let flag = true; // 创建一个标识开关

  return function() {
    if (flag) {
      flag = false; // 第一次进来关闭flag，让之后的触发都进不来

      // 节流函数一般都是第一次不做delay
      func.apply(this, arguments); // 为了确保这里的this能指向调用者，所以用apply

      timer = setTimeout(() => (flag = true), delay); // 重置开关
    }
  };
}