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行是我没有做防抖的样子。大家可以快速的拉动滚动条，看看这两者的区别。我自己觉得还是没有防抖的好看，哈哈。
上一篇： 使用shell脚本安装lnmp的方法步骤
下一篇： javascript如何给div设置高度