1.防抖Debounce
- 指在某个事件频繁触发时,延迟一定时间后再执行回调函数。如果在延迟时间内又触发了同样的事件,那么会重新计时。
- 多次触发,只执行最后一次
1.1应用场景
- 搜索框实时搜索:只需用户最后一次输入完,再发送请求
- 手机号、邮箱输入验证
- 窗口大小调整:只需窗口调整完成后,计算窗口大小,防止重复渲染
1.2 实现防抖函数
- 思路:延迟函数执行并重新计时以确保在一段时间内只执行一次函数
<div><input type="text" id="debounce"></div>
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 (() => {
// 箭头函数没有this、arguments,所以apply使用不用提前存,用的就是外部的
fn.apply(this, arguments)
}, time)
}
}
2.节流Throttle
每隔一段时间,只执行一次函数
侧重点在于隔段时间一次,隔段时间一次
2.1 应用场景
- 页面滚动加载,加载更多或滚到底部监听
- 高频点击提交,表单重复提交
- 谷歌搜索框,搜索联想功能
2.2 实现节流函数
- 时间戳实现:
function throttle (fn, delay) {
let prevTime = Date.now();
return function(){
if(Date.now() - prevTime > delay){
fn.apply(this, arguments)
prevTime = Date.now()
}
}
}
- 定时器实现:
function throttle (fn, delay) {
let timer = null
return function() {
if(timer) return
timer = setTimeout (() => {
fn,apply(this, arguments)
timer = null
}, delay)
}
}