防抖节流作为性能优化的大能,面试几乎是必考,我建议不仅要好好看,还要自己上手写一下它的代码。
我这里我简单的例子向大家介绍这两个的概念,为的就是大家都能看懂还一下就能记住。
防抖:当事件触发后,等待一段时间才会执行,如果等待时间内再次触发则重新记时。
例如:一个输入框,用户输入内容会显示和输入相关的提示:
如果是需要向后端拿数据,那么这个提示其实就是触发了接口请求。
防抖就是在用户停止输入内容一段时间后再向后端发送请求,防止用户快速输入内容导致前端一直向后端不断发送请求
代码:
js
<body>
<input type="text" id="input" placeholder="Type here">
<script>
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
// 获取输入框元素
const inputElement = document.getElementById('input');
// 创建一个处理输入事件的函数
function handleInput() {
console.log('Input value:', inputElement.value);
// 在这里可以添加需要处理的逻辑
}
// 使用防抖函数包装输入事件处理函数,并设置延迟时间为 300 毫秒
const debouncedInputHandler = debounce(handleInput, 2000);
// 监听输入事件,并应用防抖处理
inputElement.addEventListener('input', debouncedInputHandler);
</script>
</body>
节流:多次触发事件后,每隔一段时间执行一次
例如:一个登陆按钮,你点击登陆它没反应,你就一直快速点击发现登陆进去了,其实它设定了时间间隔,假设前端设置了5s,那5s内你怎么点击都不会触发事件,5s后才会触发事件。
代码:
js
<body>
<ul>
<li id="li">点击</li>
</ul>
<script>
function throttle(func, delay) {
let timer;
return function() {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
}
};
}
// 使用节流函数包装需要节流处理的函数,并设置时间间隔为 500 毫秒
const throttledClickHandler = throttle(handleClick, 3000);
// 在实际使用中,例如监听点击事件时使用节流函数
document.getElementById('li').addEventListener('click', throttledClickHandler);
function handleClick(){
console.log('click');
}
</script>
</body>
将func的this绑定到document.getElementById('li'),这和显示绑定有关。
说到底节流就是你被硬控了几秒,这段时间你动不了,时间过了才能动。