防抖(debounce)
1.在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms ,然后:
- 如果在200ms内没有再次触发滚动事件,那么就执行函数
- 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
效果:如果短时间内大量触发同一事件,只会执行一次函数。
实现::既然前面都提到了计时,那实现的关键就在于setTimeOut这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:
//func 是函数 ,wait是等待的时间
function debounce(func,wait) {
//使用闭包定义变量防止全局污染
var timer=null;
return function() {
//事件在计时途中触发就会重新计时
var _this=this;
var args=arguments;
clearTimeout(timer)
timer=setTimeout(function() {
func.apply(_this,args)
//否则一次性计时器自然结束
},wait)
}
}
节流(throttle)
类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)。
效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。
实现
//时间戳版本实现节流
//func 是函数 ,wait是等待的时间
function throttle(func,wait) {
var timer=null;
return function() {
var _this=this;
//参数
var args=arguments;
//只要执行了就会强制按时循环执行
if(!timer) {
timer=setTimeout(function() {
timer=null;
func.apply(_this,args)
},wait)
}
}
}