防抖又叫为函数防抖(debounce)
JS中的防抖(Debounce)是指在事件触发后等待一段时间再执行相应的操作。如果在这段时间内再次触发了同样的事件,则会重新计算等待时间。
前端开发中,常见的事件如,onresize,scroll,mousemove ,mousehover 。
以下是一个使用JavaScript编写的防抖函数示例:
function debounce(func, delay) {
let timer; // 定义一个变量来保存定时器ID
return function() {
clearTimeout(timer); // 清除之前设置的定时器
timer = setTimeout(() => {
func.apply(this, arguments); // 调用传入的函数并将参数传递进去
}, delay);
};
}
上面的代码定义了一个名为debounce
的高阶函数,接收两个参数:要执行的函数 func
和延迟时间 delay
。当该函数被调用时,首先会清除之前设置的定时器,然后创建一个新的定时器,经过延迟时间后才真正执行传入的函数。
可以通过以下方式使用防抖函数:
// 需要防抖处理的函数
function handleScroll() {
console.log("滚动事件");
}
// 获取元素
const element = document.getElementById('myElement');
// 添加滚动事件监听器,并使用防抖函数包装
element.addEventListener('scroll', debounce(handleScroll, 200));
上述代码中,我们通过addEventListener
方法向元素添加了一个滚动事件监听器,并且使用了防抖函数对其进行了包装。每当滚动事件触发时,都会根据设置的延迟时间来判断是否执行handleScroll
函数。
节流又叫函数节流(throttle)
JavaScript节流是指在一定时间内限制函数执行的次数,以避免过度计算和渲染。这种技术特别适用于那些需要快速响应用户输入或屏幕变化的情况,如用户输入响应、滚动事件处理和窗口尺寸调整。节流的核心思想是通过使用定时器来控制函数的执行频率,确保只有在前一个事件的处理完成后才会执行下一个事件的处理器。这样可以在不影响用户体验的前提下,提高网页性能和效率。
代码实现
假设有一个需求做一个幸运抽奖数字生成器,我们只想在特定时间后获得一个数字。通过节流,我们可以实现这一点。
const throttle = (func, limit) => {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args)
lastRan = Date.now()
}
}, limit - (Date.now() - lastRan));
}
}
}
btn.addEventListener('click', throttle(function() {
return console.log('HOLA! oppo', new Date().toUTCString());
}, 1000));
这将只在给定的时间间隔后调用/执行指定的函数,无论调用多少次。
防抖和节流的区别
函数防抖:是X秒内只执行一次,如果触发事件后在 X 秒内又触发了事件,则会重新计算函数延执行时间。
函数节流:是间隔时间执行,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。