debounce (防抖)
因频繁执行 DOM 操作, 资源加载等行为, 导致 UI 停顿甚至浏览器崩溃
- window 对象频繁的
onresize,onscroll等事件 - 拖拽的
mousemove事件 - 资源加载的
load事件 - 文字输入, 自动完成的
keyup事件
比如每次搜索框内每输入一下就会向服务器发送一个请求, 这样既没有意义, 也很浪费资源
实际上我们更希望搜索框内当有一段时间内没有再发生输入事件时, 此时再向服务器发送请求会更有利与页面性能和缓解服务器压力
function debounce(func, delay = 100) {
let timer = null
return function () {
let that = this
let args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
func && func.apply(that, args)
}, delay)
}
}
throttle (节流)
节流分为时间戳和定时器版
节流单纯的降低代码执行的频率, 保证一段时间内核心代码只执行一次
时间戳版和定时器版的节流函数的区别
- 时间戳版的函数触发是在时间段内开始的时候
- 定时器版的函数触发是在时间段内结束的时候
时间戳版
function throttle(func, wait = 100) {
let lastTime = 0
return function () {
let nowTime = new Date().getTime()
if (nowTime - lastTime > wait) {
func && func.apply(this, arguments)
lastTime = nowTime
}
}
}
定时器版
function throttle(func, delay = 100) {
let timer = null
return function () {
let that = this
let args = arguments
if (!timer) {
timer = setTimeout(() => {
func && func.apply(that, args)
timer = null
}, delay)
}
}
}
防抖与节流的区别
- 防抖: 在规定时间内不再有新的调用后执行一次函数
- 节流: 保证一段时间内执行一次函数
