函数优化利器：防抖和节流，带你领略优雅编程之美

前端

2024-02-15 12:37:28

函数优化利器：防抖和节流

在前端开发中，我们经常会遇到这样的场景：用户在输入框中输入内容时，需要实时更新搜索结果；或者在滚动页面时，需要动态加载更多内容。这些场景中，如果我们直接在事件触发时执行函数，可能会导致函数被多次调用，从而导致页面卡顿。

为了解决这个问题，我们可以使用防抖和节流两种函数优化技术。它们可以有效减少函数调用的次数，从而提升网页性能。

防抖：化繁为简，避免函数频繁触发

防抖的原理是：当一个事件在指定的时间内连续触发时，只执行一次函数。如果在指定的时间内事件再次触发，则取消上次的函数执行，并重新计时。

防抖可以有效避免函数被多次调用，从而降低对服务器的请求次数，提升页面响应速度。它常用于搜索框输入、滚动加载等场景。

防抖的实现

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

节流：有条不紊，控制函数执行频率

节流的原理是：在一个指定的时间间隔内，只允许函数执行一次。如果在指定的时间间隔内函数再次触发，则忽略本次触发。

节流可以有效控制函数的执行频率，从而防止函数被过度调用，导致系统资源浪费。它常用于页面滚动、鼠标移动等场景。

节流的实现

function throttle(fn, delay) {
  let lastTime = 0;
  return function () {
    const now = new Date().getTime();
    if (now - lastTime > delay) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}