函数防抖与函数节流：防止资源浪费的最佳实践

前端

2023-10-19 21:27:43

在快节奏的网络世界中，用户交互至关重要，效率是衡量用户体验的决定性因素。函数防抖和函数节流是一种技术，旨在提高交互式应用程序和网站的响应能力和性能，同时最大限度地减少不必要的资源消耗。

函数防抖

函数防抖是一种技术，它在一段连续操作结束后处理回调。想象一下一个搜索栏，当用户输入查询时，立即触发搜索请求。然而，如果用户还在输入，这可能会导致不必要的多余请求，浪费资源并降低性能。

函数防抖通过设置一个计时器来解决这个问题。当用户输入时，计时器启动，在输入停止后保持一段时间。只有当计时器结束后，才触发搜索请求。这样，只有在用户完成输入时才会执行搜索，最大限度地减少不必要的请求。

函数节流

函数节流是一种技术，它在一段连续操作中，每隔一段时间执行一次。想象一下一个调整窗口大小的功能，该功能在调整窗口时不断触发大小计算。但是，如果调整频繁，这可能导致不必要的重新渲染和性能下降。

函数节流通过设置一个计时器来解决这个问题。每当调整窗口时，计时器就会启动。然而，只有在计时器结束后，才计算窗口大小并触发重新渲染。这样，即使频繁调整窗口，窗口大小也只在固定的时间间隔内计算一次。

比较函数防抖和函数节流

函数防抖和函数节流都是强大的技术，但它们在应用场景上有所不同。函数防抖用于在操作完成后执行一次回调，而函数节流用于在操作进行中以固定间隔执行回调。

应用场景

函数防抖： 搜索栏输入、文本编辑器自动完成、表单验证
函数节流： 窗口大小调整、页面滚动、鼠标移动、动画

实现

函数防抖和函数节流可以在JavaScript中轻松实现，可以使用现成的库或自己编写简单的函数。

示例：

函数防抖

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

函数节流

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