什么是防抖和节流？有什么区别？怎么实现？

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次触发，则重新计算时间。

• 思路：

每次调用事件时都取消之前的延时调用方法

function debounce(fn,delay) {
  let timeout = null;  // 创建一个标记用来存放定时器的返回值
  return function() {
    clearTimeout(timeout); // 每当调用debounce方法时把前一个setTimeout计时器清零
    timeout = setTimeout(() => {
      fn.apply(this,arguments); // 创建一个新的计时器，期间debounce没再被调用时，直到delay结束fn执行，防抖操作成功
    },delay)
  }
} 

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

• 思路：

每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn,delay) {
  let canRun = true; // 通过闭包保存一个标记
  return function() {
    if(!canRun) return; // 在函数开头判断标记是否为true，不为true则return
    canRun = false; // 立即设置为false
    setTimeout(() => {
      fn.apply(this,arguments);
      canRun = true; // 最后计时器执行完毕后将标记设置为true进行下一次循环，计时器没执行完毕的时候canRun永远是false，在函数开头就会被return。
    }，delay)
  }
}

所以防抖和节流的区别是：

防抖是将多次执行变为最后一次执行，常用于搜索框，而节流是将多次执行变成每隔一段时间执行，例如抢购一件商品时， 短时间内只执行一次点击。