事件防抖与节流

在前端开发中，有很多场景中，我们会用到事件防抖与节流，场景：某个项目中图片加载特别多，需要对图片进行懒加载，这个时候会用到防抖与节流。
防抖：在一定时间内如果是要多次触发某事件，那么每次触发都会重新计算延迟时间
节流： 一段时间内只做一件事情，一段时间内多次触发时也只会执行一次

防抖代码（封装版）

function debounce(delay, func) {
	let timer 
	return function(value) {
		clearInterval(timer)
		timer = setTimeOut(function() {
			callback(value)
}, wait)
}
}

节流代码（封装版）

function throttle(func, wait) {
		let timer
		return function() {
			if(!timer) {
				timer = setTimeOut(function() {
				func()
				timer = null
}, wait)
}
}
}

对图片使用懒加载， 是在视图窗口移动到我们所看到的图片时，用data-src代替src，代码段如下

var imageNumber = document.getElementsByTagName('img').length
var img = docuemnt.getElementsByTagName('img')
//图片加载到的位置，避免图片从头开始记载
var n = 0
//标志位，当前图片是否记载完成
var isLoading = false
//可见区域高度
var _clientHeight  = document.documentElement.clientHeight
//滚动条距头部高度
var _scrollTop = document.documentlElement.scrollTop || document.body.scrollTop
//监听窗口变化，计算可视区域
function computeClientHeight() {
	_clientHeight = document.documentElement.clientHeight
}
lazyLoad()
function lazyLoad() {
	isLoading = n >=num ? true: false
	_scrollTop = document.documentlElement.scrollTop || document.body.scrollTop
	for(var i =0 ; i< num; i++) {
	if(img[i].offsetTop < _clientHeight + _scrollTop) {
		if(img[i].getAttriubte('src') == '') {
	img[i].src = img[i].getAttribute('data-src')
}
n = i + 1
}
}
}
//加载完图片之后，不需要多次执行节流，进行优化
function throttle(func, wait, flag) {
		let timerOut
		return function() {
			if(falg) {return}
			if(!timerOut) {
			timerOut = setTimeOut(function() {
				timerOut = null
				func()
}, wait)
}
		}
}