前言
防抖和节流是前端开发中常用的函数优化手段，它们可以限制函数的执行频率，提升性能和用户体验。在我们的日常开发中，经常会遇到一些需要对函数进行优化的场景，比如防止表单的重复提交。
一 防抖与节流的区别
我们简单描述下它们的作用
防抖：它限制函数在一段连续的时间内只执行一次。当连续触发某个事件时，只有在事件停止触发一段时间后，才会执行函数。
节流：它按照固定的时间间隔执行函数。当连续触发某个事件时，每隔一段时间执行一次函数。
简而言之，防抖是在事件停止触发后延迟执行函数，而节流是按照固定的时间间隔执行函数。
因为防抖和节流的作用和应用场景基本相同，也就导致它们容易被人混淆，不好记忆。
之前在网上看到了一个例子非常的有趣形象，和大家分享下。
王者荣耀大家都玩过吧，里面的英雄都有一个攻击间隔，当我们连续的点击普通攻击的时候，英雄的攻速并不会随着我们点击的越快而更快的攻击。这个其实就是节流，英雄会按照自身攻速的系数执行攻击，我们点的再快也没用。
而防抖在王者荣耀中就是回城，在游戏中经常会遇到连续回城嘲讽对手的玩家，它们每点击一次回城，后一次的回城都会打断前一次的回城，只有最后一次点击的回城会被触发，从而保证回城只执行一次，这就是防抖的概念。
自从我看到这个例子后，节流和防抖就再也没记混过了。作为一个8年王者老玩家。
下面是防抖和节流的实现
二 防抖的实现与使用
防抖的应用场景：
- 输入框搜索：当用户在搜索框中输入关键字时，使用防抖可以避免频繁发送搜索请求，而是在用户停止输入一段时间后才发送请求，减轻服务器压力。
- 窗口调整：当窗口大小调整时，使用防抖可以避免频繁地触发重排和重绘操作，提高页面性能。
- 按钮点击：当用户点击按钮时，使用防抖可以避免用户多次点击造成的多次提交或重复操作。
immediate参数用于控制防抖函数是否立即触发，true立即触发，false过delay时间后触发。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
function debounce(func, delay, immediate) {
let timer;
return function () {
let context = this;
let args = arguments;
if (timer) {
clearTimeout(timer)
}
if (immediate && !timer) {
func.apply(context, args)
}
timer = setTimeout(() => {
timer = null
if (!immediate) {
func.apply(context, args)
}
}, delay);
}
}
// 创建一个被防抖的函数
const debouncedFunction = debounce(() => {
console.log("Debounced function executed.");
}, 1000, false);
document.getElementById('btn').addEventListener('click', debouncedFunction)
</script>
</body>
</html>三 节流的实现与使用
节流的应用场景：
- 页面滚动：当页面滚动时，使用节流可以限制滚动事件的触发频率，减少事件处理的次数，提高页面的响应性能。
- 鼠标移动：当鼠标在某个元素上移动时，使用节流可以减少事件处理的次数，避免过于频繁的操作。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
function throttle(func, delay, immediate) {
let timer;
return function () {
const context = this
const args = arguments
if (timer) {
return
}
if (!timer && immediate) {
func.apply(context, args)
}
timer = setTimeout(() => {
timer = null
if (!immediate) {
func.apply(context, args)
}
}, delay);
}
}
// 创建一个被节流的函数
const throttledFunction = throttle(() => {
console.log("throttled function executed.");
}, 1000, false);
document.getElementById('btn').addEventListener('click',throttledFunction)
</script>
</body>
</html>结尾
看完本文章后，希望能够加深大家对防抖和节流的印象，分清二者的区别。