节流:用于频繁请求操作例如resize,click,保证某些代码不可以在没有间断的情况下连续重复执行,第一次调用,会创建一个定时器,在指定的时间间隔之后执行代码。当第二次调用时,它会清除前一次的定时器并设置新的一个,如果前一个定时器已经执行过了,这个操作就没有意义。然而,如果前一个定时器尚未执行,其实就是将其替换成一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后执行。
1 function throttle(event, time) { 2 let timer = null; 3 return function (...args) { 4 clearTimeout(timer); 5 timer = setTimeout(() => { 6 event.apply(this, args); 7 }, time); 8 }; 9 }
防抖:不管事件触发频率多高,都保证在触发一定时间后应答
1 function debounce(event, time) { 2 let valid= true; 3 return function (...args) { 4 if(valid){ 5 timer = setTimeout(() => { 6 event.apply(this, args); 7 valid=true 8 }, time); 9 }; 10 valid=false 11 }; 12 }