函数防抖与节流
在js中,用户频繁触发事件 对DOM处理造成性能消耗。
防抖:短时间内多次触发同一事件,会重新开始计时,直到等待时长到达后执行一次
//简单封装防抖函数
function debounce(callback) {
//定义变量来接收事件开启的定时器
var timer = null;
return function () {
//记录当前的this
var _this = this
//清除上一次事件开启的定时器
clearTimeout(timer)
//接收当前事件开启的定时器
timer = setTimeout(() => {
//定时器时间一到改变回调函数this指向执行函数
callback.call(_this)
}, 1000);
}
}
节流:一个事件的触发 ,一段时间内只仅触发一次
//利用时间戳简单实现
function throttle(callback,delay) {
//接收上一次事件执行完时变化的时间戳
var lastTime = 0;
return function () {
//获取当前触发事件的时间戳
var nowTime = new Date()
//间隔时间是否到了
if (nowTime - lastTime > delay) {
//执行回调
callback()
//记录当前时间戳
lastTime = nowTime
}
}
}
防抖与节流的区别
防抖:短时间内多次触发,最终在停止触发后的某个指定时间执行一次函数(只执行一次)
节流:短时间内多次触发,即使事件触发仍在继续,但也可以根据指定时间触发一次函数(至少执行一次)