JavaScript 防抖节流

tuIE0P.jpg

debounce (防抖)

因频繁执行 DOM 操作, 资源加载等行为, 导致 UI 停顿甚至浏览器崩溃

  • window 对象频繁的 onresize, onscroll等事件
  • 拖拽的mousemove事件
  • 资源加载的load事件
  • 文字输入, 自动完成的keyup事件

比如每次搜索框内每输入一下就会向服务器发送一个请求, 这样既没有意义, 也很浪费资源

实际上我们更希望搜索框内当有一段时间内没有再发生输入事件时, 此时再向服务器发送请求会更有利与页面性能和缓解服务器压力

1
2
3
4
5
6
7
8
9
10
11
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 (节流)

节流分为时间戳定时器版

节流单纯的降低代码执行的频率, 保证一段时间内核心代码只执行一次

时间戳版定时器版的节流函数的区别

  • 时间戳版的函数触发是在时间段内开始的时候
  • 定时器版的函数触发是在时间段内结束的时候

时间戳版

1
2
3
4
5
6
7
8
9
10
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
}
}
}

定时器版

1
2
3
4
5
6
7
8
9
10
11
12
13
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)
}
}
}

防抖与节流的区别

  • 防抖: 在规定时间内不再有新的调用后执行一次函数
  • 节流: 保证一段时间内执行一次函数
-------------本文结束感谢阅读-------------