js防抖和节流

最新推荐文章于 2025-04-23 21:38:13 发布

weixin_30256901

最新推荐文章于 2025-04-23 21:38:13 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daniao11417/p/10234830.html

　　今天在网上看到的，里面的内容非常多。说下我自己的理解。

　　所谓的防抖就是利用延时器来使你的最后一次操作执行。而节流是利用时间差的办法，每一段时间执行一次。下面是我的代码：

这段代码是右侧的小滑块跟随页面一起滑动。

 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>