1 <!-- 函数节流: 2 JavaScript中有些事件触发频率是非常高的,比如onresize事件(jq中的resize),onmousemove事件(jq中的mousemove)以及鼠标滚轮事件,在短时间内多次触发执行绑定的函数,可以巧妙的用定时器来减少触发的次数,实现函数节流 --> 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $ timer = null; 12 $(window).mousewhell(function(event,data){ 13 // event代表事件本身,data代表滚轮每滚动一次的值,向上是1,向下是-1 14 // 鼠标多次滚动,设置了200ms的缓冲时间,这里先清空定时器,还未执行的就不会在执行了,只会执行此次 15 clearTimeout(timer); 16 timer = setTimeout(function(){ 17 // 鼠标滚动时要执行的代码 18 },200) 19 }) 20 }); 21 </script> 22 </head> 23 <body> 24 25 </body> 26 </html>