今天在网上看到的，里面的内容非常多。说下我自己的理解。
所谓的防抖就是利用延时器来使你的最后一次操作执行。而节流是利用时间差的办法，每一段时间执行一次。下面是我的代码：
这段代码是右侧的小滑块跟随页面一起滑动。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>为了测试防抖和节流</title> 6 <link rel="stylesheet" type="text/css" href="css/cssReset.css"/> 7 <style type="text/css"> 8 9 .class1{ 10 100px; 11 height: 200px; 12 background: #CCCCCC; 13 } 14 #box{ 15 50px; 16 height: 50px; 17 background: #289A62; 18 position: absolute; 19 right: 0; 20 top: 0; 21 } 22 23 </style> 24 </head> 25 <body> 26 <div class="class1">1</div> 27 <div class="class1">2</div> 28 <div class="class1">3</div> 29 <div class="class1">4</div> 30 <div class="class1">5</div> 31 <div class="class1">6</div> 32 <div class="class1">7</div> 33 <div class="class1">8</div> 34 <div class="class1">9</div> 35 <div class="class1">10</div> 36 <div class="class1">11</div> 37 <div class="class1">12</div> 38 <div class="class1">13</div> 39 <div class="class1">14</div> 40 <div class="class1">15</div> 41 <div class="class1">16</div> 42 <div class="class1">17</div> 43 <div class="class1">18</div> 44 <div class="class1">19</div> 45 <div class="class1">20</div> 46 47 <div id="box"> 48 返回顶部 49 </div> 50 </body> 51 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 52 <script type="text/javascript"> 53 54 var windows_height = $(window).height(); 55 var scroll_height = $(window).scrollTop(); 56 setTimeout(function(){ 57 $("#box").animate({ 58 "top":(windows_height/2)+ scroll_height-25 59 },1000) 60 },100) 61 var time1 = false; //给延时器命名 62 $(window).scroll(function(){ 63 if(time1){ 64 clearInterval(time1) 65 66 } 67 time1 = setTimeout(function(){ 68 var scroll_height = $(window).scrollTop(); 69 console.log(scroll_height); 70 71 $("#box").stop(); 72 $("#box").animate({ 73 "top":(windows_height/2)+ scroll_height-25 74 },1000) 75 time1 = false; 76 },500) 77 }) 78 // $(window).scroll(function(){ 79 // var scroll_height = $(window).scrollTop(); 80 // console.log(scroll_height); 81 // 82 // $("#box").stop(); 83 // $("#box").animate({ 84 // "top":(windows_height/2)+ scroll_height-25 85 // },1000) 86 // }) 87 </script> 88 </html>
这里面只有防抖，没有节流，大家注意一下。78——86行是我没有做防抖的样子。大家可以快速的拉动滚动条，看看这两者的区别。我自己觉得还是没有防抖的好看，哈哈。