前端性能优化之防抖节流对比及应用场景

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

背景需求

需求：配置默认情况下首次进入地图页面时，地图展示的位置。进入地图时的获取当前地图所在范围的中心点坐标，蓝色点位始终在中心点。

设计思路

地图可视范围改变就触发打点函数

1、地图api提供了地图可视范围改变的事件EventType.MAPEVENT_EXTENTCHANGED

2、在地图缩放过程中对地图的范围重新调整，因为EXTENTCHANGED事件的触发是非常快的，用户虽然在频繁地变更地图范围，但用户在单位时间内能感知到的事情是有限的，也许1秒内执行100次和1秒钟执行10次感知上并没有太大差别，而且事件结束后要将点打在中心点，频繁触发渲染容易造成浏览器卡顿。

防抖节流对比

节流：事件节流用于控制事件触发的最小间隔，如一个事件100毫秒内只能触发一次。 防抖：例如设定间隔时间为300毫秒，防抖则是在事件触发后300毫秒再执行事件处理器。假如在这300毫秒内又触发了相同事件，则取消上次的事件，不执行事件处理器，以最后一次触发事件的时机开始，等待300毫秒执行事件处理器。

举例说明：地图范围改变事件花了1秒钟，使用节流则执行10次，使用防抖则执行1次。（此处为理想状态，主要是想阐明两者之间的区别）

根据需求在地图移动或缩放过程中不需要频繁获取中心点，只需要在缩放结束后获取即可，因此选择防抖。

公共代码防抖

防抖代码

/**
 *
 * @param {执行的函数} func
 * @param {防抖等待时间} wait
 */
export function debounce(func, wait) {
  let timer = null;
  return () => {
    if (timer) {
      clearTimeout(timer);
      timer = setTimeout(func, wait);
    } else {
      timer = setTimeout(func, wait);
    }
  };
}

防抖函数的使用

业务代码

    this.resizeHandler = debounce(() => {
      this.getCenter();//获取中心点
    }, 300);
    map.event.addListener(
        EventType.MAPEVENT_EXTENTCHANGED,
        this.resizeHandler
      );

总结

当事件过程不重要的时候，只需要关注最后一步操作改变时，使用防抖，比如地图缩放导致中心点改变、关键词联想、表单校验等。当过程需要在视觉上体现时选择使用节流。