手写节流、深拷贝函数实现

防抖函数基本实现

1 function debounce(fn,delay){
2     let timer=null
3     return function(...args){
4         if(timer)clearTimeout(timer)
5         timer=setTimeout(() => {
6             fn.apply(this,args)
7         }, delay);
8     }
9 }

防抖函数完正版

 1 function debounce(fn,delay,immediate=false){
 2     let timer=null
 3     let isInvoke=false
 4     const _debounce = function(...args){
 5         return new Promise((resolve,reject)=>{
 6             if(timer)clearTimeout(timer)
 7             //判断是否需要立即执行
 8             if(immediate&& !isInvoke){
 9                 const result=fn.apply(this,args)
10                 resolve(result)
11                 isInvoke=true
12             }else{
13                 timer=setTimeout(() => {
14                     const result=fn.apply(this,args)
15                     resolve(result)
16                     isInvoke=false
17                     timer=null
18                 }, delay);
19             }
20         })
21     }
22 
23     //封装取消功能
24     _debounce.cencel=function(){
25         if(timer)clearTimeout(timer)
26         timer=null
27         isInvoke=false
28     }
29     return _debounce
30 }

节流函数基本实现

 1 节流 基本实现
 2 function throttle(fn,interval){
 3     //1.记录上一次的开始时间
 4     let lastTime=0
 5     //2.事件触发时，真正执行的函数
 6     const _throttle=function(){
 7         //2.1.获取当前事件触发时的时间
 8         const nowTime=new Date().getTime()
 9         //2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间，计算出还剩余多长事件需要去触发函数
10         const remainTime=interval-(nowTime-lastTime)
11         if(remainTime<=0){
12             //2.3.真正触发函数
13             fn()
14             //2.4.保留上次触发的时间
15             lastTime=nowTime
16         }
17     }
18     return _throttle
19 }

节流函数完整版本

 1 function throttle(fn,interval,options={leading:true,trailing:false}){
 2     const {leading,trailing,resultCallback}=options
 3     //1.记录上一次的开始时间
 4     let lastTime=0
 5     let timer=null
 6     //2.事件触发时，真正执行的函数
 7     const _throttle=function(...args){
 8         //2.1.获取当前事件触发时的时间
 9         const nowTime=new Date().getTime()
10         if(!lastTime&&!leading){
11             lastTime=nowTime
12         }
13         //2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间，计算出还剩余多长事件需要去触发函数
14         const remainTime=interval-(nowTime-lastTime)
15         if(remainTime<=0){
16             if(timer){
17                 clearTimeout(timer)
18                 timer=null
19             }
20             //2.3.真正触发函数
21             const result=fn.apply(this,args)
22             if(resultCallback)resultCallback(result)
23             //2.4.保留上次触发的时间
24             lastTime=nowTime
25             return
26         }
27         if(trailing&&!timer){
28             timer=setTimeout(() => {
29                 timer=null
30                 lastTime=!leading?0:new Date().getTime()
31                 const result=fn.apply(this,args)
32                 if(resultCallback)resultCallback(result)
33             }, remainTime);
34         }
35     }
36     _throttle.cancel=function(){
37         if(timer)clearTimeout(timer)
38         timer=null
39         lastTime=0
40     }
41     return _throttle
42 }