妙用JS防抖与节流，提升Springboot实战电商项目Mall4j性能

前端

2024-01-17 23:57:47

前言

在当今快速发展的电商领域，网站的性能优化尤为重要。用户希望在访问电商网站时获得流畅无缝的体验，而这在很大程度上取决于前端性能。JS防抖与节流是两种非常有效的技术，可以帮助我们提升前端性能，改善用户体验。

正文

一、JS防抖与节流的概念与原理

1. JS防抖

JS防抖是一种函数执行策略，它可以防止函数在短时间内被重复多次调用。其原理是：当一个函数在一定时间内被多次调用时，只有最后一次调用会被执行，而前面的调用都会被忽略。这样可以有效避免不必要的函数调用，从而提高程序的性能。

2. JS节流

JS节流也是一种函数执行策略，它与防抖不同的是，它会在一定时间内只允许函数执行一次。其原理是：当一个函数在一定时间内被多次调用时，只有第一次调用会被执行，而后续的调用都会被忽略。这样可以有效控制函数的执行频率，从而防止函数被过度调用，提高程序的性能。

二、JS防抖与节流的应用场景

1. JS防抖的应用场景

JS防抖通常应用于以下场景：

表单验证：在用户输入表单时，可以使用防抖来防止表单验证函数被多次调用。这样可以提高表单验证的效率，避免不必要的服务器请求。
搜索建议：在用户输入搜索框时，可以使用防抖来防止搜索建议函数被多次调用。这样可以提高搜索建议的效率，避免不必要的服务器请求。
窗口大小改变：当浏览器窗口大小改变时，可以使用防抖来防止窗口大小改变事件被多次触发。这样可以提高窗口大小改变事件的处理效率，避免不必要的函数调用。

2. JS节流的应用场景

JS节流通常应用于以下场景：

页面滚动：当用户滚动页面时，可以使用节流来防止页面滚动事件被多次触发。这样可以提高页面滚动事件的处理效率，避免不必要的函数调用。
鼠标移动：当用户移动鼠标时，可以使用节流来防止鼠标移动事件被多次触发。这样可以提高鼠标移动事件的处理效率，避免不必要的函数调用。
视频播放：当视频播放时，可以使用节流来防止视频播放事件被多次触发。这样可以提高视频播放事件的处理效率，避免不必要的函数调用。

三、JS防抖与节流的实现

1. JS防抖的实现

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

2. JS节流的实现

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