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