函数节流与防抖

函数防抖

原理：采用定时器，触发方法后，在n秒以内，多次触发该方法时，该方法只会执行一次，并且每次触发时都会重新计时。例如，公交司机关车门，在乘客上车后，司机会等待几秒看看是否有下一秒乘客上车，如果有，在下一名乘客上车后，还会等待几秒，看看是否有下下一名乘客要上车，直到等待几秒后，没有乘客继续上车，才会关闭车门。

用途：浏览器窗口大小改变，重新渲染页面；输入框检验手机号、邮箱地址格式是否正确；

代码：以页面滚动加载为例(从头到底)

function debounce (callback, delay){
        	let t = null 
        	return function (...args) {
        		// 清空定时器
        		if(t){
        			clearTimeout(t)
        		}
        		t = setTimeout(()=>{
        			callback.call(this,args)
        		},delay)
       }
 }
 window.onscroll = debounce(function(){
        	console.log("防抖页面加载")
 },500)

函数节流

原理：通过记录本次方法执行时间与上次执行时间做比较，若时间间隔大于设定时间，则执行方法，若时间间隔小于设定时间，则不执行方法，即一段时间内，同一方法只执行一次。

用途：搜索框联想搜索（百度搜索输入框）；滚动加载；高频度的表单提交操作等

代码：以页面滚动加载为例(从头到底)

function throttle (callback,delay){
        	// 记录上一次时间
        	var lastTime = 0
        	return function (...args){
        		// 记录本次时间
        		var now = new Date().getTime();
        		// 本次时间 - 上次记录时间差 > 设定的时间间隔
        		if(now - lastTime >delay){
        			callback.call(this,args);
        		    lastTime = now;
        		}	
           }
     }