防抖和节流
防抖呢,是在固定得时间内没有触发,然后再固定事件结束后进行触发,如果实在固定得时间内触发了事件,会延长相应的固定时间再触发
他呢,主要可以利用我们的定时器来实现
实现的方法:
function debounce(func,wait) {
var timer=null;
return function() {
//保存当前调用的dom对象
var _this=this;
//保存事件对象
var args=arguments;
clearTimeout(timer)
timer=setTimeout(function() {
func.apply(_this,args)
},wait)
}
}
节流呢,是无论在固定得时间内是否触发,都会按照固定时间规律的去触发
他的实现方法呢,有两种:
一种呢是时间戳的形式,一种是定时器的形式
- 第一种:时间戳
function throttle(func,wait) {
//定义初始时间
var oldTime=0;
return function() {
var _this=this;
var args=arguments;
//当前时间戳
var newTime=+new Date();
//判断用当前时间减去旧的时间,如果大于wait指定的时间就会触发
if(newTime-oldTime>wait) {
//执行触发的函数
func.apply(_this,args)
//将旧时间更新
oldTime=newTime;
}
}
- 定时器形式:
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)
}
}
}