前端利器：防抖与节流，让你的代码更高效！

前端

2023-12-30 08:35:56

引言

在前端开发中，处理事件是必不可少的任务。然而，当事件频繁触发时，就会给系统带来额外的负担。防抖和节流函数应运而生，成为优化事件处理的利器。

防抖与节流：异曲同工，各显神通

防抖和节流函数虽然都旨在减少函数执行次数，但其具体执行方式却大相径庭。

防抖函数：

多次触发事件时，会延迟执行函数，直到最后一次触发事件后才真正执行。
主要用于处理频繁触发的事件，如输入框输入时的实时搜索。

节流函数：

设定一个时间间隔，在时间间隔内只执行一次函数。
主要用于处理需要时间间隔来完成的事件，如页面滚动时的加载更多数据。

应用场景：前端实践的妙用

防抖和节流函数在前端开发中有广泛的应用，以下列举几个常见场景：

输入框搜索： 防抖函数可避免频繁触发搜索请求，提高用户体验。
页面滚动加载： 节流函数可控制加载更多数据的频率，避免因过度加载而造成页面卡顿。
事件监听： 节流函数可防止事件处理函数过快执行，优化性能。
移动端触摸事件： 防抖函数可处理手指快速滑动时的误触问题。

如何使用：防抖与节流的实现

在 JavaScript 中，实现防抖和节流函数有多种方法。最常用的方法是利用 setTimeout 和 clearTimeout 函数。

防抖函数实现：

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

节流函数实现：

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