当前位置：首页 > news >正文

【温故而知新】JavaScript的防抖与节流

news 2025/9/14 19:06:15

一、概念

JavaScript中的防抖（debounce）和节流（throttle）是用于控制函数执行频率的技术。

防抖：当一个事件连续触发时，防抖技术将只执行最后一次触发事件的函数调用。换句话说，只有在停止触发事件一段时间后，才会执行函数。(即：n秒后再执行该事件，若在n秒内被重复触发，则重新计时)

使用防抖的场景：

搜索框输入联想：用户在输入时，如果一直输入，会频繁触发搜索请求，使用防抖可以减少请求的次数，只在用户停止输入后才发送请求。
页面滚动加载更多：当用户滚动页面时，会频繁触发加载更多数据的函数，使用防抖可以减少请求的次数，只在用户停止滚动后才发送请求。

以下是一个使用防抖的示例代码：

function debounce(func, wait) {  let timeout;  return function() {  const context = this;  const args = arguments;  clearTimeout(timeout);  timeout = setTimeout(function() {  func.apply(context, args);  }, wait);  };  
}

使用示例

const input = document.querySelector('input');  
input.addEventListener('input', debounce(function() {  console.log('Input value:', input.value);  
}, 200));

节流：当一个事件连续触发时，节流技术会限制函数的执行频率。换句话说，函数在一段时间内只会执行一次。（即：n秒内只运行一次，若在n秒内重复触发，只有一次生效）

使用节流的场景：

页面滚动事件：当用户滚动页面时，会触发滚动事件，如果不使用节流技术，可能会导致页面卡顿。使用节流可以限制滚动事件的触发频率，减少卡顿现象。

以下是一个使用节流的示例代码：

function throttle(func, limit) {  let inThrottle;  return function() {  const context = this;  const args = arguments;  if (!inThrottle) {  func.apply(context, args);  inThrottle = true;  setTimeout(function() {  inThrottle = false;  }, limit);  }  };  
}

使用示例

const input = document.querySelector('input');  
input.addEventListener('input', throttle(function() {  console.log('Input value:', input.value);  
}, 200));

无论是防抖还是节流，都可以通过传递一个延迟时间参数来控制函数的执行频率。在实际应用中，根据具体需求选择使用防抖还是节流技术。

二、区别

防抖和节流都是用于控制函数执行频率的技术，但它们的实现方式和效果有一些区别。

区别如下：

触发时刻：

防抖：只有在事件停止触发一段时间后，才会执行函数。
节流：在一段时间内只会执行一次函数。

执行次数：

防抖：只会执行最后一次触发事件的函数调用。
节流：在一段时间内只会执行一次函数调用。

实现方式：

防抖：在事件触发后设置一个定时器，在定时器延迟时间内没有再次触发事件，则执行函数。
节流：在事件触发时设置一个定时器，在定时器延迟时间内触发事件则不执行函数。只有当定时器执行完毕后，才能再次触发执行函数。

使用场景：

防抖：适用于连续事件触发的情况，如搜索框输入、滚动加载更多等。
节流：适用于高频率事件触发的情况，如页面滚动、鼠标移动等。

根据具体的需求，选择使用防抖或节流技术可以有效地控制函数的执行频率，提升用户体验和性能。

三、优缺点

JavaScript的防抖和节流都是优化高频率触发的事件或函数调用的技术，但它们的使用场景和优缺点略有不同。

防抖的优点：

减少不必要的操作：防抖能够确保在连续触发事件时，只执行最后一次操作，避免了频繁执行操作带来的性能浪费。
优化用户体验：在一些需要用户等待的操作中，防抖可以避免频繁触发操作导致的界面卡顿，提高用户体验。

防抖的缺点：

可能会错过一些操作：如果事件触发频率过高，防抖可能会忽略掉一些操作，导致一些必要的操作没有执行。
不适合所有场景：防抖只适合在连续触发事件时使用，对于一些非连续触发的事件，使用防抖可能并不合适。

节流的优点：

控制操作频率：节流能够确保在一定时间内只执行一次操作，避免了频繁执行操作带来的性能浪费。
适合各种场景：节流适用于各种场景，无论是连续触发的事件还是非连续触发的事件，都可以使用节流来优化性能。

节流的缺点：

可能会漏掉一些操作：如果事件的触发频率非常高，节流可能会导致一些必要的操作被忽略掉。
需要合理设置时间间隔：节流的时间间隔需要根据实际情况进行调整，如果时间间隔设置过长，可能会导致性能问题；如果时间间隔设置过短，则可能会导致频繁触发事件时无法及时处理。

四、后记

JavaScript是一种广泛应用于网页开发的脚本语言，它可以用来为网页添加交互性和动态特效。JavaScript可以在网页中直接嵌入，也可以作为外部文件引用。

以下是JavaScript的一些重要特点和用法：

脚本语言：JavaScript是一种解释型脚本语言，不需要编译，可以直接在浏览器中执行。
弱类型语言：JavaScript是一种弱类型语言，变量的数据类型可以随时改变，不需要声明变量的类型。
事件驱动：JavaScript可以通过监听用户的操作或者其他事件触发特定的代码执行，实现网页的交互性。
DOM操作：JavaScript可以通过文档对象模型（DOM）来操作网页的HTML元素，可以动态地添加、修改和删除元素。
表单验证：JavaScript可以通过表单验证来确保用户输入的数据符合要求，提供更好的用户体验。
AJAX：JavaScript可以通过AJAX技术实现网页的异步加载，可以在不刷新整个页面的情况下更新部分内容。
JSON：JavaScript Object Notation（JSON）是一种轻量级的数据交换格式，JavaScript可以很方便地解析和生成JSON数据。
库和框架：JavaScript拥有丰富的库和框架，如jQuery、React、Angular等，可以简化开发过程并提供更强大的功能。

JavaScript是一种强大且灵活的语言，可以用来创建复杂的交互式网页，并且可以与HTML和CSS无缝配合，实现出色的用户体验。

五、热门文章

【温故而知新】JavaScript的Document对象
【温故而知新】JavaScript的BOM之Screen/Location/History对象
【温故而知新】JavaScript的BOM之Navigator对象
【温故而知新】JavaScript的BOM之Window对象
【温故而知新】JavaScript数据结构详解
【温故而知新】JavaScript数据类型
RESTful API，如何构建 web 应用程序
jQuery实现轮播图代码
vue实现文本上下循环滚动
Vue运用之input本地上传文件，实现传参file:(binary)
js判断各种浏览器
uni-app详解、开发步骤、案例代码