javaScript——函数节流

什么是函数节流

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

在这里插入图片描述
一言以蔽之:一秒钟(规定时间)之内只生效(只执行)一次点击事件(一次操作)
在这里插入图片描述

函数节流代码

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

这里的代码都可以直接复制粘贴到浏览器运行
在这里插入图片描述

总结

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

发布了15 篇原创文章 · 获赞 15 · 访问量 4054

猜你喜欢

转载自blog.csdn.net/qq_35508835/article/details/105181812