1.防抖Debounce
- 指在某个事件频繁触发时，延迟一定时间后再执行回调函数。如果在延迟时间内又触发了同样的事件，那么会重新计时。
- 多次触发，只执行最后一次
1.1应用场景
- 搜索框实时搜索：当用户输入时，防抖可以用于延迟发送请求，避免频繁请求后端接口。
- 表单输入验证：使用防抖函数可以延迟触发验证操作，只在用户输入完毕一段时间后进行验证，避免频繁的验证操作。
- 窗口大小调整：当窗口大小调整时，防抖可以用于调整事件触发的频率，避免频繁操作导致页面抖动。
1.2 实现防抖函数
-
思路：延迟函数执行并重新计时以确保在一段时间内只执行一次函数
const debounceDom = document.getElementById('debounce')
// 使用防抖函数，确保在连续触发 keyup 事件时只触发一次 ajax 函数
debounceDom.addEventListener('keyup', debounce(ajax, 500))// 模拟一个 ajax 请求
function ajax() {
console.log('这是一个请求');
}// 实现防抖的函数
function debounce(fn, time) {
let timer = null
return function () {
if (timer) { //说明上次定时器还没有执行完 清除上次定时器
clearTimeout(timer)
}
timer = setTimeout (() => {
// 使用apply将函数fn的执行上下文设置为当前函数的执行上下文，并传入当前函数的参数
fn.apply(this, arguments)
}, time)
}
}
2.节流Throttle
-
指规定一个单位时间（延迟
delay时间），只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。 -
规定时间内，只触发一次
2.1 应用场景
- 页面滚动加载
- 频繁点击按钮
- 鼠标移动
- 键盘按键
- 动画场景：避免短时间内多次触发动画引起性能问题
- 拖拽场景: 在某些场景下，频繁触发位置变动会造成性能问题
2.2 实现节流函数
-
用
Date.now()获取时间来判断是否在规定时间内function throttle (fn, delay) {
let prevTime = Date.now();
return function(){
if(Date.now() - prevTime > delay){
fn.apply(this, arguments)
prevTime = Date.now()
}
}
} -
设置一个
flag来标志function throttle (fn, delay) {
let flag = true
return function () {
if (flag) {
setTimeout(() => {
fn.apply(this, arguments)
flag = true
}, delay)
}
flag = false
}
}