JavaScript防抖与节流怎样减少请求次数

avatar
作者
筋斗云
阅读量:0

在 JavaScript 中,防抖(debounce)和节流(throttle)是两种常用的优化高频率触发事件的技术,它们都可以用来减少请求次数。

  1. 防抖(debounce): 防抖的基本原理是在一定时间内,无论触发多少次事件,都只执行一次指定的函数。当事件停止触发后,才会再次执行。适用于如输入框实时搜索、窗口大小调整等场景。

实现方法:

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

使用示例:

const searchInput = document.querySelector('#search-input'); const fetchData = () => { /* 请求数据的操作 */ };  const debouncedFetchData = debounce(fetchData, 500); searchInput.addEventListener('input', debouncedFetchData); 
  1. 节流(throttle): 节流的基本原理是在一定时间内,只执行一次指定的函数。与防抖不同的是,节流不会因为事件的连续触发而立即执行,而是在固定的时间间隔后执行。适用于如滚动加载、鼠标移动等场景。

实现方法:

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

使用示例:

const scrollContainer = document.querySelector('#scroll-container'); const loadData = () => { /* 请求数据的操作 */ };  const throttledLoadData = throttle(loadData, 200); scrollContainer.addEventListener('scroll', throttledLoadData); 

通过这两种技术,我们可以有效地减少高频率触发事件的请求次数,提高程序的性能。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!