图片懒加载 函数防抖节流

延迟加载（懒加载）

延迟长网页中图像的加载，用户滚动到视窗之内的图像才会加载它们
作用：降低初始性能开销，更快展示首屏，更快响应用户

关键点：
1.如何实现图片是否加载？
2.如何判断某张图片是否在可视区之内？

函数防抖节流
防抖（debounce）与 节流（throttle）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

<div class="box">  
没有防抖的input：<input type="text" class="ipt1"><br>  
有防抖后的input：<input type="text" class="ipt2"><br>  
有节流后的input：<input type="text" class="ipt3"><br>
</div>
<div class="show"></div>
var ipt1 = document.querySelector('.ipt1')
var ipt2 = document.querySelector('.ipt2')
var ipt3 = document.querySelector('.ipt3')
var show = document.querySelector('.show')
function ajax(){  var xhr = new XMLHttpRequest()  
	xhr.open('get','./test.txt')  xhr.send(null)  
	xhr.onreadystatechange = function (){    
	if(xhr.readyState == 4 && xhr.status == 200){      
		show.innerHTML += xhr.responseText    
		}  
	}
}

没有防抖

ipt1.onkeyup = function (){  
	ajax()
}

防抖 debounce
在事件被触发一段时间后再执行回调，如果在这一段时间内又被触发，则重新计时。

var deferTimer
ipt2.onkeyup = function (){  
	clearTimeout(deferTimer)  
	deferTimer = setTimeout(function (){    
		ajax()  
	},400)
}

函数防抖 debounce

function debounce(delay,callback){  
	var deferTimer  
	return function (){    
		clearTimeout(deferTimer);    
		deferTimer = setTimeout(function (){      
			callback()    
		},delay)  
	}
}
var debounceAjax = debounce(400,ajax)
ipt2.onkeyup = function (){  
	debounceAjax()
}

节流 throttle

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

var lastTime, deferTimer
ipt3.onkeyup = function (){  
	var nowTime = Date.now();//当前时间戳  
	if (lastTime && nowTime < lastTime + 1000) {//每秒执行一次    
		clearTimeout(deferTimer)    
		deferTimer = setTimeout(function () {      
			lastTime = nowTime;//记录当前时间      
			ajax();//发送请求    
		}, 1000);  
	}else {//立即执行    
		lastTime = nowTime;//记录当前时间    
		ajax();//发送请求  
	}
}

函数节流 throttle

return function (){    
	var nowTime = Date.now()//当前时间戳    
	if (lastTime && nowTime < lastTime + delay) {//限制频率      
		clearTimeout(deferTimer)      
		deferTimer = setTimeout(function () {        
			lastTime = nowTime//记录当前时间        
			callback()//发送请求      
		}, delay)    
	}else {//立即执行      
		lastTime = nowTime;//记录当前时间      
		callback()//发送请求    
	}  
    }
}
var throttleAjax = throttle(1000,ajax)
ipt3.onkeyup = function (){  
	throttleAjax()
}

应用场景

防抖 debouncesearch搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流 throttle鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

总结：函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。
函数节流就是射击游戏的射速，就算不停按着鼠标射击，也只会在规定射速内射出子弹。