JS 节流

最新推荐文章于 2024-06-14 14:14:14 发布

A初

最新推荐文章于 2024-06-14 14:14:14 发布

阅读量200

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45148841/article/details/107111335

版权

JS 节流

节流其实和防抖差不多,但是节流是按照时间来确定他访问次数的,在一定的时间内只能访问一次,就差不多和我们现在的获取短信验证码一样,只不过他把这个时间可视化了,告诉你了,节流,我们也可以这样理解
老规矩上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>节流</title>
</head>
<style type="text/css">
.abc{
	height: 300px;
	background:red;
}
   </style>
<body>
    <div class="abc"  >
    </div>
</body>
<script >
	 var b =document.querySelector('.abc');   //获取div对象
 b.onmousemove	= jl(FZ,1000);;//当对象触发onmousemove事件的时候调用jl
 function FZ (ev)
 {
  this.innerHTML= ev.clientX; //调用的对象上展示,传进来的参数是onmousemove生成的对象,他的clientX属性(X轴坐标)
 }
 function  jl(fn,sj){
 	var  time = null;   // time 此时为 false
 	return function ()
 	{	
 		var arg = arguments[0]; //获取onmousemove生成的对象
  if(!time)  // 把 time  取反  变成  true
  { 
      time = setTimeout(()=>{   //箭头函数, 传递 this 
        time=null    //延迟后再变成bull  
        fn.call(this,arg[0]) // 调用FZ ()  指定了对象是this(div)  第二个是参数onmousemove生成的对象
      },sj)  
        }
       }
      }
      </script>
      </html>

没什么难的, 一个很简单的例子,代码什么的都不重要 ,主要是逻辑思维,毕竟现在网络上,什么都可以查出来.

A初

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 节流

JS 节流节流其实和防抖差不多,但是节流是按照时间来确定他访问次数的,在一定的时间内只能访问一次,就差不多和我们现在的获取短信验证码一样,只不过他把这个时间可视化了,告诉你了,节流,我们也可以这样理解老规矩上代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>节流</title></head><style type="
复制链接

扫一扫