前端性能优化之防抖&节流

### 前端性能优化之防抖&节流

#### 什么是防抖和节流？

防抖和节流是前端开发常用的两种性能优化技术

#### 为什么需要防抖和节流？

两者的目的都是为了防止某个时间段内操作频繁触发，造成性能消耗

#### 防抖和节流的区别

防抖是在一定时间内只执行最后一次操作，而节流是在一定时间内只执行一次操作。

#### 防抖

防抖的原理是设置一个定时器，当事件触发时，如果定时器存在，则清除定时器重新设置，直到定时器执行完毕，才会执行最后一次操作。

function debounce(fn, delay) {
  let timer = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

#### 节流

节流的原理是设置一个标志位，当事件触发时，如果标志位为true，则执行操作，并将标志位设置为false，直到一定时间后再将标志位设置为true。

function throttle(fn, delay) {
  let flag = true;
  return function() {
    let context = this;
    let args = arguments;
    if (flag) {
      fn.apply(context, args);
      flag = false;
      setTimeout(function() {
        flag = true;
      }, delay);
    }
  }
}

#### 防抖和节流的应用场景

1. 防抖：搜索框输入联想、窗口大小改变、按钮点击等

2. 节流：滚动加载、鼠标移动、窗口大小改变等