js函数的节流和防抖

js-》函数的节流和防抖

1、函数防抖(debounce)

原理：每次触发事件时设置一个延迟调用方法，每次触发都会先清空上一次的延时器，然后重新调用方法
缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟
	function debounce(fn, wait) {    
		var timeout = null;    
		return function() {        
			if(timeout !== null)   clearTimeout(timeout);        
			timeout = setTimeout(fn, wait);    
		}
	}

2、函数节流(throttle)

原理：每次触发事件时，借助第三方变量，判断如果当前有等待执行的延时函数，则直接return

 if (!flag) return;
         // 立即设置为false
        flag= false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn();
            flag= true;
        }, delay);