高效掌控JavaScript节流与防抖，提升前端性能优化

2023-09-05 12:21:41

防抖与节流：前端性能优化的利器

在前端开发中，我们经常会遇到这样的场景：当用户在输入框中输入内容时，我们需要对输入的内容进行实时校验；当用户调整窗口大小时，我们需要对页面布局进行重新调整；当用户滚动页面时，我们需要加载更多内容。如果我们对这些事件的处理函数不加控制地频繁调用，那么就会对浏览器造成很大的负担，从而导致页面卡顿，用户体验极差。

为了解决这个问题，我们需要用到防抖和节流这两项技术。防抖和节流都是用来限制函数的调用频率，从而避免对浏览器造成过大的负担。

防抖：延迟执行

防抖的原理是：在一段时间内，如果函数被调用多次，那么只执行最后一次调用的函数，而忽略之前的调用。这样就可以有效地减少函数的调用次数，从而减轻浏览器的负担。

防抖的实现非常简单，我们可以使用JavaScript的setTimeout函数来实现。以下是防抖函数的实现代码：

function debounce(func, wait) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}

节流：间隔执行

节流的原理是：在一段时间内，函数只能执行一次，如果在一段时间内函数被调用多次，那么只执行第一次调用的函数，而忽略之后的调用。这样就可以确保函数在一段时间内只执行一次，从而减轻浏览器的负担。

节流的实现也比较简单，我们可以使用JavaScript的setInterval函数来实现。以下是节流函数的实现代码：

function throttle(func, wait) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime > wait) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
}