节流:持续触发事件时,保证在一定时间之内,函数只触发一次,这种情况在mousemove、scroll等事件中会经常发生,如果我们不对这种情况进行阻止,会消耗性能,这是完全可以避免的。
实现节流用到定时器和时间戳,下面就封装一个节流函数,模拟场景是在抢优惠券:
var span = document.getElementsByTagName('span')[0];
var btn = document.getElementsByTagName('button')[0];
function throttle(handler, wait){
var lastTime = 0;
return function (e){
//当前点击按钮的时间
var nowTime = new Date().getTime();
if(nowTime - lastTime >= wait){
lastTime = nowTime;
//改变事件对象,让this和e和没有节流前一样!!
handler.apply(this, arguments);
}
}
}
//模仿点击抢优惠券,防止恶意脚本攻击
function buy(e){
console.log(this, e);
span.innerHTML = parseInt(span.innerHTML) + 1;
}
btn.onclick = throttle(buy, 1000);
html部分如下:
<span>0</span>
<button type="button">click</button>
最重要的是,在实现节流函数的时候,改变this的指向和参数列表,否则和原始函数就不同了。