1、关于节流
节流就是用来控制某个函数在一定时间内触发次数,为了减少触发频率,以便提高性能或避免资源浪费。举个例子,我们经常会在网卡的时候一直点击请求加载某个页面或资源,这时候其实连续点击很多次其实也是没有效果。
2、简单分析
根据上面这个例子,我们就可以得到节流需要达到的目标:也就是说当我们在某个时间间隔内连续点击是没有效果的,当超过了这个时间点击才有效果,从而大大减少了请求触发的次数,从而达到了“节流”的目标。
3 代码实现
这里以一个简单的点击事件的节流为例子,实现的效果为一秒内连续点击不触发函数,超过点击一秒才触发。
<script>
let d = document.querySelector("div"); //声明并绑定一个用来点击的元素
function fn1() {
console.log("没节流");
}
//节流函数
function throttle(fn, delay) {
var timer = null;
return function () { //回调函数:如果一秒内连续点击那么就会清空计时器,重新计时
if (timer != null) {
console.log("节流中");
clearInterval(timer);
}
timer = setInterval(fn, delay);
}
}
d.addEventListener("click",throttle(fn1,1000)); //绑定一个点击事件
</script>