函数防抖(debounce)
::概念:: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
::实例:: 如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。
应用场景
* 给按钮加函数防抖防止表单多次提交。
* 对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。
* 判断scroll是否滑到底部,滚动事件+函数防抖
> 总的来说,适合多次事件一次响应的情况
函数代码
function debounce(fn, wait) {
let timer = null;
return function () {
const context = this
const args = arguments
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
var fn = function () {
console.log('boom')
}
// 滚动停止时候执行
window.onscroll = debounce(fn, 500)
函数节流(throttle)
::概念:: 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
::实例:: 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时,在人眼的视觉中就会形成一个连贯的动画,所以在电影的播放(以前是,现在不知道)中基本是以每秒 24 张的速度播放的,为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候,100 张就会显得很浪费资源。
应用场景
* 游戏中的刷新率
* DOM元素拖拽
* Canvas画笔功能
* DOM 元素的拖拽功能实现(mousemove)
* 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
* 计算鼠标移动的距离(mousemove)
* Canvas 模拟画板功能(mousemove)
* 搜索联想(keyup)
* 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次
> 总的来说,适合大量事件按时间做平均分配触发。
函数代码
function throttle(fn, gapTime) {
// 定义上次时间为null
let _lastTime = null
return function() {
// 获取当前时间
let _nowTime = +new Date()
// 如果当前时间-上次时间>间隔时间 或 上次时间不存在
if (_nowTime - _lastTime > gapTime || !_lastTime) {
// 执行函数
fn()
// 重置上次时间为当前时间
_lastTime = _nowTime
}
}
}
let fn = () => {
console.log('boom')
}
window.onscroll = throttle(fn, 1000)
使用 debounce 和 throttle 以及常见的坑
- 不止一次地调用 debounce 方法:
// 错误
$(window).on('scroll', function() {
debounce(doSomething, 300)
})
// 正确
$(window).on('scroll', debounce(doSomething, 200))