在上篇博客中我们提到了优化页面请求--防抖,这两个都是做性能优化的,同样的是当前端开发过程中有一部分用户频繁操作使得频繁触发事件,所造成的页面卡顿,浏览器崩溃现象。
节流
函数节流就是预定一个函数只有在大于或者等会它的执行周期的时候才会执行,小宇执行周期不会执行该函数。
应用场景:窗口调整(resize),页面滚动(scroll),抢购疯狂点击(mousedown)
我们封住一个节流函数来实现节流这个功能,以疯狂点击为例
当我们疯狂点击一个按钮时,疯狂点击事件触发会导致网络请求卡顿,我们不希望这样,设置在某个时间段中点击事件不累加就可以了。
var oDiv = document.getElementById('div');
var btn = docuemnt.getElementById('btn');
function throttle(handler,time){
var lastTime = 0 ; // 设置初始事件
return function(e){
var nowTime = new Date().getTime(); //获取当前时间
if( nowTime - lastTime > time){
handle.apply(this,arguments);
lastTime = nowTime;
}
}
}
function show(e){ console.log(this);}
btn.onclick = throttle(show,1000);