防抖和节流的实现原理

防抖

防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计算。

适用场景：

1. 按钮提交场景：防止多次提交按钮，只执行最后提交的一次

2. 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

实现代码：

const debounce = (fn, delay) => {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.call(this, ...args);
    }, delay);
  }
}

节流

节流函数原理：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次

适用场景：

1. 拖拽场景：固定时间内只执行一次，防止超高频次触发未知变动

2. 缩放场景：监控浏览器resize

3. 动画场景：避免短时间内多次触发动画引起的性能问题

实现代码：

const throttle = (fn, delay) => {
  let flag = true
  return (...args) => {
    if (!flag) return;
    flag = false
    setTimeout(() => {
      fn.call(this, ...args);
      flag = true
    }, delay);
  }
}