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

JS 防抖和节流

news 2025/7/15 14:31:14

防抖（debounce）和节流（throttle）是JavaScript中常用的性能优化技术，用于限制某些高频率触发的函数执行次数，减少不必要的计算和网络请求。下面分别介绍防抖和节流的实现方式。

防抖（Debounce）

防抖的原理是在事件触发后等待一段时间，如果在这段时间内没有再次触发该事件，就执行函数；如果再次触发了该事件，则重新计时。这样可以确保只有事件停止触发后才会执行函数。

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

使用示例：

// 定义一个需要防抖处理的函数
function search() {// 执行搜索操作
}// 创建防抖函数
const debouncedSearch = debounce(search, 300);// 添加事件监听器
const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", debouncedSearch);

当用户输入搜索关键字时，会触发input事件并调用debouncedSearch函数。但由于应用了防抖，只有在停止输入300毫秒后才会实际执行搜索操作。

节流（Throttle）

节流的原理是规定一个时间间隔，在这个时间间隔内，只能执行一次函数。如果在该时间间隔内多次触发该函数，只有第一次会被执行，后续的触发将被忽略。

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

使用示例：

// 定义一个需要节流处理的函数
function scrollHandler() {// 处理滚动事件
}// 创建节流函数
const throttledScroll = throttle(scrollHandler, 200);// 添加事件监听器
window.addEventListener("scroll", throttledScroll);

当用户滚动页面时，会触发scroll事件并调用throttledScroll函数。由于应用了节流，每200毫秒才会实际处理一次滚动事件，减少了函数的触发次数。

查看全文

http://www.lryc.cn/news/214565.html