介绍一下js的节流与防抖

本文主要是介绍介绍一下js的节流与防抖，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在JavaScript中，节流（Throttling）和防抖（Debouncing）是两种常用的优化高频率触发事件的策略。它们主要用于限制函数的执行频率，以避免因频繁触发导致的性能问题。

1. 防抖（Debouncing）

防抖的核心思想是：在一定时间间隔内，如果事件被连续触发，那么只有最后一次触发的事件会被执行，如果在这个时间间隔内没有再次触发事件，那么就会执行这个事件。

例如，在搜索框输入内容时，我们希望用户停止输入一段时间（比如500毫秒）后再发送请求，而不是每输入一个字符就发送一次请求。

function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}// 使用示例
const myEfficientFn = debounce(function() {
// 假设这是一个高开销的函数
console.log('Resized!');
}, 250);window.addEventListener('resize', myEfficientFn);

2. 节流（Throttling）

节流的核心思想是：在一定时间间隔内，无论事件被触发多少次，都只执行一次。如果在这个时间间隔内再次触发事件，那么会重新计算执行时间。

例如，在滚动事件中，我们希望每隔一段时间（比如200毫秒）只触发一次滚动事件的处理函数，而不是每次滚动都触发。

function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}// 使用示例
const myEfficientFn = throttle(function() {
// 假设这是一个高开销的函数
console.log('Scrolled!');
}, 250);window.addEventListener('scroll', myEfficientFn);