当很频繁地(在设置的事件内)触发某一个回调的时候,只执行最后一次触发的回调。
应用场景:用户持续点击某一按钮(抢购某一商品)
// 防抖函数接收一个函数和延时时间
function debounce(fun, delay) {
// 1.设置一个定时器变量
var timer = null;
return function() {
// 清除上一次定义的定时器,保证只执行最后一次定时器里面的操作
clearTimeout(timer);
timer = setTimeout(() => {
fun();
}, delay)
}
}
function fn() {
console.log('sss')
}
window.addEventListener('scroll', debounce(fn, 2000))
如果持续触发事件,则每隔一段时间才会触发一次。
应用场景:发送ajax请求,搜索功能获取提示信息,或者用于鼠标的跟随动画实现,scroll
,resize
, touchmove
, mousemove
等极易持续性促发事件的相关动画问题,降低频率
function throttle(fun, delay) {
// 定时器变量
var timer = null;
return function() {
// 判断是否已经触发过一次回调了,触发过一次则等待上一次执行完
if(!timer) {
timer = setTimeout(() => {
fun();
// 执行完后就把定时器变量设为空,方便再执行下一次
timer = null;
}, delay)
}
}
}
function fn() {
console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))
function throttle(func, delay) {
// 设置一个变脸用于接收之前的时间戳
var preTime = 0;
return function() {
// 获取当前的时间戳
var now = Date.now()
// 判断是否在delay时间间隔内,是就不执行,不是就执行
if(now - preTime >= delay){
func()
// 将当前时间赋值给preTime 作为上一次执行的时间,以此来判断上一次和下一次执行的时间间隔
preTime = now
}
}
}
function fn() {
console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))
这两种实现的方式的不同点是:
使用setTimeout一开始执行就会有延迟,而使用时间戳的方式当第一次触发回调会立即执行
函数的防抖与节流都是优化性能的一种方式,目的都是,降低回调函数的执行频率,节省计算资源。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。