防抖与节流

---

一、防抖节流的原理

防抖：当事件触发时，设定一个周期延迟执行动作，若在此周期之内，又被触发，则该事件设定的周期清除，重新设立周期，直到周期结束，执行动作。
（在n秒内触发多次事件，会重新计算时间）

节流：固定周期内，只执行一次动作。若在固定周期内，多次触发，不执行。若周期结束后，又有事件触发，则开始新的周期。
（在n秒内触发多次事件，只执行一次动作）

之前在b站评论看过一条关于防抖节流的评论：
防抖：王者荣耀里的回城，一旦打断就要重新开始
节流：王者荣耀里的技能冷却，冷却时间没到无法使用
（不得不说，不愧是广大网友群众哈哈哈哈，通俗易懂）

二、实现方法

1.防抖

原理如下：

代码如下：

		//普通防抖
        function debounce(fn, wait) {
   
            let timer = null; //计时器
            const _debounce = function(...args){
   
                //如果再次触发，存在定时器则重置
                if(timer) clearTimeout(timer);
                timer = setTimeout(()=>{
   
                    fn.apply(this,args);
                    timer = null;   //执行完操作，将timer重置为null
                },wait)
            }
            return _debounce;
        }

		//立即执行防抖
		function debounce(fn, wait, immediate = false) {
   
            let timer = null; //计时器
            let isInvoke = false;   //记录是否执行过
            const _debounce = function(...args){
   
                //如果再次触发，存在定时器则重置
                if(timer) clearTimeout(timer);
                //如果立即执行为true
                if(immediate && !isInvoke){
   
                    fn.apply(this,args);
                    isInvoke = true;
                    return