js防抖和節流

程先生哈發表於2019-01-07
JS

　　今天在網上看到的，裡面的內容非常多。說下我自己的理解。

　　所謂的防抖就是利用延時器來使你的最後一次操作執行。而節流是利用時間差的辦法，每一段時間執行一次。下面是我的程式碼：

這段程式碼是右側的小滑塊跟隨頁面一起滑動。

 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行是我沒有做防抖的樣子。大家可以快速的拉動滾動條，看看這兩者的區別。我自己覺得還是沒有防抖的好看，哈哈。

相關文章