IT狗

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-2559             },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-2574                 },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-2585 //            },1000)86 //        })87     </script>88 </html>

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论