5_防抖和节流相关

1、防抖debounce

定义：触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算时间

应用场景：搜索框、窗口滚动等

 1 <body>
 2     <div >
 3         这里是div
 4     </div>
 5 
 6     
 7 </body>
 8 <script>
 9     const debounce = (fn,waitTime) =>{
10         immediate = true;
11         let timer = null;
12         
13         return function(){
14 
15             if(timer) clearTimeout(timer);
16 
17             timer = setTimeout(()=>{
18                 fn.call(this,arguments);
19             },waitTime);
20         };
21     };
22     let dbFunction = debounce(()=>{
23         console.log('防抖函数执行了')
24     },500)
25 
26     document.addEventListener("scroll",dbFunction)
27 </script>
28 <style>
29     div{
30         background-color: aqua;
31         height: 1000px;
32     }
33 </style>
防抖scroll

2、节流

定义：多次触发同一个函数，但是在规定时间内只能执行一次

2.1、利用定时器实现节流

 1         function resize(e){
 2             console.log('窗口大小改变了')
 3         }
 4         // window.addEventListener('resize',resize)//此时会连续触发
 5 
 6         function throttle(fn,waitTime){
 7             let timer = null;
 8             return function(){
 9                 if(!timer){
10                     fn.call(this, arguments)
11                     timer = setTimeout(()=>{
12                         timer = null;
13                     },waitTime)
14                 }else{
15                     console.log("上一个定时器还未完成呢")
16                 }
17             }
18         }
19 
20         window.addEventListener('resize',throttle(resize,500))
定时器节流

2.2、利用时间戳实现节流

 1  function resize(e){
 2             console.log('窗口大小改变了')
 3         }
 4         // window.addEventListener('resize',resize)//此时会连续触发
 5         //#region 
 6         // function throttle(fn,waitTime){
 7         //     let timer = null;
 8         //     return function(){
 9         //         if(!timer){
10         //             fn.call(this, arguments)
11         //             timer = setTimeout(()=>{
12         //                 timer = null;
13         //             },waitTime)
14         //         }else{
15         //             console.log("上一个定时器还未完成呢")
16         //         }
17         //     }
18         // }
19         //#endregion
20         function throttle(fn,waitTime){
21             let lastTime = 0;
22             return function(){
23                 let now = Date.now();
24                 if(now >= lastTime+waitTime){
25                     fn.call(this,arguments);
26                     lastTime = now;
27                 }else{
28                     console.log('距离上次调用的时间太短了')
29                 }
30             }
31         }
32         window.addEventListener('resize',throttle(resize,500))
利用时间戳

 

posted @ 2022-03-05 22:21  踏燕白梅  阅读(26)  评论(0)    收藏  举报