节流(throttle)
什么是节流
n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
形象地说,就是事件进入冷却时间了,要等待冷却时间到了之后才能再次触发。
手写节流
function throttle(fn, time) {
let timer = null
return (...args) => {
if (timer) {
return
}
fn.call(undefined, ...args)
timer = setTimeout(() => {
timer = null
}, time)
}
}
// 测试demo
const fn = function () {
console.log(111)
}
const x = throttle(fn, 5000)
使用场景
- 滚动加载,加载更多或滚到底部监听
- 搜索框,搜索联想功能
防抖(debounce)
什么是防抖
n 秒后再执行该事件,若在 n 秒内被重复触发,则重新计时
形象地说,每触发一次事件就相当于打断上一次触发,重新开始计时,直到n秒成功触发。
手写防抖
function debounce(fn, time) {
let timer = null
return (...args) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.call(undefined, ...args)
}, time)
}
}
// 测试demo
const fn = function () {
console.log(111)
}
const x = throttle(fn, 2000)
使用场景
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。