看完本文,可以解决下面三个面试题
- 手写一个节流、防抖函数并讲解原理
- 手写一个简单搜索框,并实现搜索逻辑
- 手写一个滚动优化
本文配有完整的 demo 演示,可前往逐一测试,使用 netlify 部署,访问速度可能稍慢。
https://lxfriday-give-me-job-web-serve.netlify.com/
节流防抖是一种防止函数频繁无序执行的设计思想,它的核心目的是让无序变为有序,让函数执行更符合预期目的。
防抖
防抖的原理是,只要在倒计时的范围内,新触发防抖函数就会导致计时器重置,要重新等待 wait
时长之后才能执行。
简单实现
最简单的 debounce
示例中绑定了 this
,在调试工具中可以看到 this
和 event 对象
function debounce(func, wait) {
let timeout
return function debounced(...args) {
const ctx = this
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(ctx, args)
}, wait)
}
}
需要立即执行的防抖
debounce2 with immediate
和上面不同之处在于,在定时时间之后,只要触发就会立即执行(第一种是要等待 wait
时长),然后至少在 wait
之后才能进行下次触发。
function debounce(func, wait, immediate) {
let timeout
r