闭包应用--节流

最新推荐文章于 2024-06-07 10:59:46 发布

爱美丽007

最新推荐文章于 2024-06-07 10:59:46 发布

阅读量98

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_63456913/article/details/129518159

版权

节流函数用于限制函数在特定时间内的执行次数，例如防止表单重复提交或控制高频事件如scroll、mousehover。其主要原理是通过闭包和setTimeout来控制一个标志变量，确保在设定延迟时间内只允许函数执行一次。

摘要由CSDN通过智能技术生成

节流函数的作用是在限定的时间内函数只执行一次，比如：

1.按钮提交（可以避免重复提交，当然不只这种方法，将按钮设置为不可用也可以）。

2.scroll、mousehover、mousemove等触发频率高的时候。

主要的原理就是在闭包内设置一个标记，在限定的时间内这个flag设置为true，函数再次点击则不让执行，setTimeout函数执行以后将flag设置为flase，就可以继续执行。

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{
        	margin:0;padding:0;
        }
        </style>
        </head>
        <body>
       		<div class="box" id="div_box" >
       			<button onclick="fn1()">test</button>
       		</div>
        </body>
        
<script>
//节流函数
function throttle(fn,delay){
	var flag=false;
	var timer=null;
	return function(){
		var args=[].slice.call(arguments,0);//将参数转成数组
		var context=this;
		if(flag){//如果在限定的时间内 flag是true 则直接返回，不让执行
			return;
		}
		flag=true; //函数正在控制中
		//执行函数
		fn.apply(context,args);
		clearTimeout(timer);//清除定时器
		timer =setTimeout(function(){
			flag=false;//延时时间过了以后，放开函数控制
		},delay)
		
	}	
}
function fn(){
	console.log(123);
}
 
var fn1 = throttle(fn,2000);//绑定节流函数 
 
 
</script>
</html>

爱美丽007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
闭包应用--节流

主要的原理就是在闭包内设置一个标记，在限定的时间内这个flag设置为true，函数再次点击则不让执行，setTimeout函数执行以后将flag设置为flase，就可以继续执行。1.按钮提交（可以避免重复提交，当然不只这种方法，将按钮设置为不可用也可以）。2.scroll、mousehover、mousemove等触发频率高的时候。
复制链接

扫一扫