JS debounce(防抖)

最新推荐文章于 2025-04-08 14:38:28 发布

A初

最新推荐文章于 2025-04-08 14:38:28 发布

阅读量1.4k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_45148841/article/details/106990821

版权

什么是防抖

在一段时间内,多次触发的情况下,限制其访问次数, (一段时间内只能访问一次,如果这段时机内又访问了, 这个重置这个时间)

老规矩先上代码:

一个简单的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>debounce-防抖</title>
</head>
<style type="text/css">
.abc{
	height: 300px;
	background:red;
}
   </style>
<body>
    <div class="abc"  >
    </div>
</body>
<script >
	 var b =document.querySelector('.abc');//获取abc对象
//当B对象,触发鼠标在对应对象上移动的时候 调用防抖函数	
 b.onmousemove	= debounce(FZ,1000);
 function FZ(ev)
 {
  this.innerHTML= ev.clientX;//这是给this这个对象里加内容,内容就是我鼠标对应的X轴坐标,
 }
 function  debounce(fn,sj){
 	var  time = null; //先给这个时间一个null 
 	return function ()//返回一个对象
 	{	
 		var newtime =  !time  // 把newtime 给上true
 		 var arg = arguments[0];//获取当前鼠标事件创建的那个对象
 		 	time && clearTimeout(time) //当time存在值的时候, 清除它 (setTimeout生成的) 
 			time = setTimeout( function () // 给time 赋值   
 			{
 				time = null; //方法执行完后,让time变回unll
 			},sj);
 		if(newtime)//如果newtime=true  
 		{
 				fn.call(this,arg)//调用 debounce 的参数fn,给他指定this,变量是鼠标事件创建的对象
 		}
 		}
 }
</script>
</html>

梳理一下逻辑关系:首先当我们鼠标第一次移动到上面的时候生成一个对应的X轴坐标,但是当鼠标一直移动(一直访问的情况下),不处理(返回的!tmie 都是false),当鼠标停止移动1秒后(完成延时后给time复制 null),才能继续执行该方法(time的反值是true的 !null=ture,因为如果是数值返回的是fales就没办法执行赋值的方法FZ).