javaScript 节流与防抖

首先我们要知道节流与防抖可以干什么。

优化网络请求性能——节流

优化页面请求性能——防抖

举两个简单的小例子：

节流：

例如有些购物页面，会有一些让你抢购的活动，到点的时候，需要你快速的点某个按钮，来抢购，

如果没有添加节流，那么你的页面，每点击一次，网络就会请求一次，更可恶的是，还有一些用鼠

标连点器来抢购，这时，节流就派上用场了。我可以设置，一秒内，你只能点击一次，效果如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div id="num">0</div>
11     <button id="btn">click</button>
12 
13     <script>
14         var oDiv = document.getElementById("num");
15         var oBtn = document.getElementById("btn");
16         
17         function throttle(handler, wait){// 第一次参数为主要函数，第二个参数为毫秒
18             var lastTime = 0;//记录过去的时间
19             return function(){
20                 var nowTime = new Date().getTime(); //获取时间戳
21                 if(nowTime - lastTime > wait){ 
22                 //用时间戳记录当前时间，当前时间 减去 上一次的时间，如果大于 wait(你设置的 1000毫秒) 说明 过去1000毫秒了，
23                 //用户可以点击第二次了。
24                     handler.apply(this, arguments)//执行 主要函数， 但是此时的 handler函数的this指向window，也
25                                                 //没有事件源对象， apply改变this 指向oBtn，传入 事件源 arguments[0]  (e)
26                     lastTime = nowTime;//主要函数执行后， 当前时间就成了过去的时间了。
27                 }
28             }
29         }
30         oBtn.onclick = throttle(buy, 1000); 
31         function buy(){
32             oDiv.innerText = parseInt(oDiv.innerText) + 1;
33             //每触发一次，内容 + 1   
34         }
35     </script>
36 </body> 
37 </html>

防抖：

请看上面的gif图，有没有发现，用户在输入，还在不停输入的时候，事件一直触发，但是实际上，

并不需要它一直触发，我们需要的是，用户在停止输入的时候，才触发事件。加入防抖，

效果图如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <input type="text" id="inp">
11     <script>
12         var oInp = document.getElementById("inp");
13 
14         function debounce (handler, delay){//第一个参数，主要函数，第二个参数为毫秒
15             var timer = null; 
16             return function (){
17                 var _self = this, //获取this 
18                 _arg = arguments;//获取事件源对象，(e)
19                 clearTimeout(timer);
20                 timer = setTimeout(function(){
21                     handler.apply(_self, _arg);//执行主要函数，此时的handler函数this指向window，
22                                                 //用apply改变this指向和传入事件源对象
23                 },delay)
24             }
25         }
26         function ajax (e){//模拟ajax 
27             console.log(this.value);
28             console.log(e); //输出到控制台，看看事件源对象 是否为input
29         }
30         oInp.oninput = debounce(ajax, 1000);//绑定事件
31     </script>
32 </body>
33 </html>

javaScript 节流与防抖

猜你喜欢