揭秘函数防抖与节流的本质，优化前端性能的利器

前端

2023-09-19 22:22:11

函数防抖与节流概述

函数防抖和函数节流都是为了控制函数的执行频率，从而优化前端应用程序的性能。函数防抖主要用于防止函数在短时间内被多次触发，而函数节流则用于确保函数在指定时间内只执行一次。

函数防抖

函数防抖的原理是，当某个事件被触发时，函数不会立即执行，而是等待一段时间。如果在这段时间内，事件再次被触发，那么函数的执行将被取消，并重新计时。这种机制可以有效地防止函数在短时间内被多次触发，从而避免不必要的计算和资源浪费。

函数防抖的应用场景包括：

表单验证：在用户输入表单数据时，可以使用函数防抖来防止表单验证函数被多次触发，从而提高表单验证的性能。
搜索建议：在用户输入搜索关键词时，可以使用函数防抖来防止搜索建议函数被多次触发，从而提高搜索建议的性能。
窗口大小改变：在用户调整浏览器窗口大小时，可以使用函数防抖来防止窗口大小改变事件被多次触发，从而提高浏览器窗口大小改变事件的处理性能。

函数节流

函数节流的原理是，当某个事件被触发时，函数不会立即执行，而是等待一段时间。如果在这段时间内，事件再次被触发，那么函数将只执行一次。这种机制可以确保函数在指定时间内只执行一次，从而避免不必要的计算和资源浪费。

函数节流的应用场景包括：

滚动事件：在用户滚动页面时，可以使用函数节流来防止滚动事件被多次触发，从而提高滚动事件的处理性能。
鼠标移动事件：在用户移动鼠标时，可以使用函数节流来防止鼠标移动事件被多次触发，从而提高鼠标移动事件的处理性能。
AJAX请求：在用户向服务器发送AJAX请求时，可以使用函数节流来防止AJAX请求被多次触发，从而提高AJAX请求的性能。

函数防抖与节流的区别

函数防抖和函数节流都是为了控制函数的执行频率，但两者之间存在着一些关键区别。

函数防抖在事件触发后会等待一段时间，然后再执行函数。而函数节流则在事件触发后立即执行函数，但在指定时间间隔内只执行一次。
函数防抖在事件触发后，如果事件在等待时间内再次被触发，那么函数的执行将被取消，并重新计时。而函数节流则在事件触发后，即使事件在等待时间内再次被触发，函数也将只执行一次。

函数防抖与节流的实现

函数防抖和函数节流可以很容易地使用JavaScript实现。以下是如何使用JavaScript实现函数防抖和函数节流：

// 函数防抖
function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// 函数节流
function throttle(func, wait) {
  let lastTime = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastTime > wait) {
      lastTime = now;
      func.apply(context, args);
    }
  };
}