什么是函数节流
还记的我以前写的一个功能,如何让点击事件在一秒钟之内只生效一次
一言以蔽之:一秒钟(规定时间)之内只生效(只执行)一次点击事件(一次操作)
函数节流代码
//普通写法
var time = null;
function ableClick(){
var nowTime = new Date().getTime();
if(time == null || (nowTime - time > 1000)){
time = nowTime;
return true;
}
return false;
}
function clickFunc(){
if(ableClick()){
console.log("点击时间:"+new Date().getTime());
}
}
window.addEventListener("click", clickFunc);
//闭包创建私有变量写法
function ableClick(func,delay){
var time = null;
return () => {
var nowTime = new Date().getTime();
if(time == null || (nowTime - time > delay)){
time = nowTime;
func.apply(this,arguments);
}
}
}
function clickFunc(){
console.log("点击时间:"+new Date().getTime());
}
window.addEventListener("click", ableClick(clickFunc,1000));
这里的代码都可以直接复制粘贴到浏览器运行
总结
使用函数节流,最主要的目的还是优化程序的性能,减少甚至去掉多余的操作,但凡满足这个条件的,都可以是它的使用场景。