今天在網上看到的，裡面的內容非常多。說下我自己的理解。 所謂的防抖就是利用延時器來使你的最後一次操作執行。而節流是利用時間差的辦法，每一段時間執行一次。下麵是我的代碼： 這段代碼是右側的小滑塊跟隨頁面一起滑動。 這裡面只有防抖，沒有節流，大家註意一下。78——86行是我沒有做防抖的樣子。大家可以快速 ...
今天在網上看到的，裡面的內容非常多。說下我自己的理解。
所謂的防抖就是利用延時器來使你的最後一次操作執行。而節流是利用時間差的辦法，每一段時間執行一次。下麵是我的代碼：
這段代碼是右側的小滑塊跟隨頁面一起滑動。
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 width: 100px; 11 height: 200px; 12 background: #CCCCCC; 13 } 14 #box{ 15 width: 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行是我沒有做防抖的樣子。大家可以快速的拉動滾動條，看看這兩者的區別。我自己覺得還是沒有防抖的好看，哈哈。
