欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js防抖和节流

程序员文章站 2022-03-07 08:20:46
今天在网上看到的,里面的内容非常多。说下我自己的理解。 所谓的防抖就是利用延时器来使你的最后一次操作执行。而节流是利用时间差的办法,每一段时间执行一次。下面是我的代码: 这段代码是右侧的小滑块跟随页面一起滑动。 这里面只有防抖,没有节流,大家注意一下。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行是我没有做防抖的样子。大家可以快速的拉动滚动条,看看这两者的区别。我自己觉得还是没有防抖的好看,哈哈。