js防抖和节流
在JavaScript中，防抖（debounce）和节流（throttle）是处理函数限制执行频率的两种常见技术。
- 防抖（debounce）：防抖是指在频繁触发某个事件时，只执行最后一次触发的操作。例如，当用户不断调整窗口大小时，我们希望在用户停止调整窗口后再执行相关操作，而不是在每次调整时都执行操作。防抖的目的是减少不必要的操作，提高性能和用户体验。
下面是一个简单的防抖函数的实现示例：
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 使用示例
const myFunc = debounce(() => {
console.log("Hey! I got debounced.");
}, 1000);
myFunc(); // 第一次调用
myFunc(); // 持续触发
// 在1秒后触发时，防抖函数执行输出结果- 节流（throttle）：节流是指在一定时间内只执行一次操作。例如，当用户不断触发某个事件时，我们可以设定一个固定的时间间隔，在此间隔内只执行一次操作。节流的目的是控制函数的执行频率，防止过于频繁的操作导致性能问题。
下面是一个简单的节流函数的实现示例：
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}
// 使用示例
const myFunc = throttle(() => {
console.log("Hey! I got throttled.");
}, 1000);
myFunc(); // 第一次调用
myFunc(); // 在1秒内持续触发，但是只在第一次触发时执行输出结果