节流其实和防抖差不多,但是节流是按照时间来确定他访问次数的,在一定的时间内只能访问一次,就差不多和我们现在的获取短信验证码一样,只不过他把这个时间可视化了,告诉你了,节流,我们也可以这样理解 老规矩上代码
<!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>没什么难的, 一个很简单的例子,代码什么的都不重要 ,主要是逻辑思维,毕竟现在网络上,什么都可以查出来.
