前端优化—关于函数节流你知道多少

什么是函数节流

还记的我以前写的一个功能，如何让点击事件在一秒钟之内只生效一次

一言以蔽之：一秒钟(规定时间)之内只生效(只执行)一次点击事件(一次操作)

函数节流代码

//普通写法
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));

这里的代码都可以直接复制粘贴到浏览器运行

总结

使用函数节流，最主要的目的还是优化程序的性能，减少甚至去掉多余的操作，但凡满足这个条件的，都可以是它的使用场景。