揭秘JS防抖与节流：让你的程序免受延迟和卡顿困扰

前端

2022-12-25 02:31:30

谁说网页不能又快又稳？JS 防抖和节流助你一臂之力！

网页性能的挑战

在当今网络世界，人们对网站的速度和响应能力有着越来越高的要求。随着网页内容愈加复杂，用户交互也愈发频繁，这给网页性能带来了严峻的挑战，可能导致延迟、卡顿，甚至页面假死。

JS 防抖与节流的登场

为了解决这些问题，JS 防抖和节流技术应运而生。它们是前端开发中用于优化程序性能的利器，能够有效限制函数的执行频率，从而提升用户体验。

函数节流：手忙脚乱的救星

原理

函数节流是一种巧妙的技术，它让函数在一定时间内只能执行一次。即使事件频繁触发，函数也不会被多次调用，避免了不必要的计算和资源浪费。

工作机制

函数节流的工作原理非常简单。它通过设置一个计时器来控制函数的执行频率。当事件触发时，计时器就会启动。如果计时器还在运行，函数就不会被调用。只有当计时器结束时，函数才会被调用一次。

代码示例

function throttle(func, wait) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= wait) {
      func(...args);
      lastCall = now;
    }
  };
}

最佳实践

使用函数节流时，需要注意以下几点：

选择合适的等待时间： 等待时间太短可能会导致函数无法正常工作，而等待时间太长可能会导致延迟。
避免在事件处理程序中直接调用函数： 这可能会导致函数被多次调用，从而降低性能。

函数防抖：优雅处理事件

原理

函数防抖与函数节流类似，但工作原理略有不同。函数防抖通过设置一个计时器来控制函数的执行时机。当事件触发时，计时器就会启动。如果在计时器结束之前又触发了事件，计时器就会重新启动。只有当计时器结束时，函数才会被调用一次。

工作机制

函数防抖的工作原理也非常简单。它通过设置一个计时器来控制函数的执行时机。当事件触发时，计时器就会启动。如果在计时器结束之前又触发了事件，计时器就会重新启动。只有当计时器结束时，函数才会被调用一次。

代码示例

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

最佳实践

使用函数防抖时，需要注意以下几点：