前言
防抖是回城，节流是攻击
防抖和节流是前端开发中常用的函数优化，可以限制函数的执行频率，提升性能和用户体验。在日常开发中可以遇到一些需要对函数进行优化的场景，比如防止表单反复提交。
防抖、节流区别
防抖：限制函数在一段连续的时间内只执行一次。当连续出发某个事件时，只有在事件停止触发一段时间后，才会执行函数。
节流：按照固定的时间间隔执行函数。当连续触发某个事件时，每隔一段时间执行一次函数。
总结：防抖是在时间停止触发后延迟执行函数，节流是按照固定的时间间隔执行函数。
实现
防抖应用场景
1、按钮点击：当用户点击按钮时，使用防抖可以避免用户多次点击造成的多次提交或重复操作。
2、输入框搜索：当用户在输入框中输入关键字时，使用防抖可避免频繁发送请求，而是在用户停止输入一段时间后才发送请求，减轻服务器压力。
3、窗口调整：当窗口大小调整时，使用防抖可以避免频繁触发重排和重绘操作，提高页面性能。
immediate参数用于控制防抖函数是否立即触发，true立即触发，false过delay时间后触发。
<button id="btn" @click="debouncedFunction()">按钮</button>
// immediate参数用于控制防抖函数是否立即触发，true立即触发，false过delay时间后触发
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(() => {
//
}, 1000, false)
节流应用场景
1、页面滚动：当页面滚动时，使用节流可以限制滚动事件的触发频率，减少事件处理的次数，提高页面的响应性能。
2、鼠标移动：当鼠标在某个元素上移动时，使用节流可以减少事件处理的次数，避免过于频繁的操作。
<button @click="throttledFunction()">按钮</button>
// 节流函数
const throttledFunction = throttle(() => {
//
}, 1000, false)
function throttle(func, delay, immediate) {
let timer;
return function () {
const context = this
const args = arguments
if (timer) return // 每隔一段时间执行一次函数，所以等待上个函数执行完毕
if (immediate && !timer) {
func.apply(context,args)
}
timer = setTimeout(() => {
timer = null
if (!immediate) {
func.apply(context, args)
}
}, delay)
}
}
