防抖节流

防抖与节流

防抖和节流都是为了限制函数的执行频次，避免响应速度跟不上触发频率，从而导致的延迟、假死、卡顿的现象。

定义

防抖：调用动作n秒之后，才会执行该动作，如果在n秒之内又调用了此动作则重新计算执行时间；

节流：预先设置一个执行周期，当调用动作的时刻大于执行周期时，执行该动作，然后进入下一个执行周期；

区别

1. 防抖是将多次操作合并为一次操作，节流是在一定时间内只触发一次函数

2. 防抖只会在最后一次才触发函数，节流是在一定时间内一定会执行一次函数

3. 防抖可以用于用户输入，节流可以用于页面滚动，无限加载

实现

// 防抖函数
function debounce(fn) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    });
  };
}
// 处理函数
function handle() {
  console.log(value);
}
<input onChange={(value)=>debounce(handle(value))}>

// 节流函数
function throttle(fn) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, 500);
  };
}
function handle(e) {
  console.log(e.target.innerWidth);
}
window.addEventListener("resize", throttle(handle));