javaScript经典系列之防抖和节流

[wangzhenggui]

概念

很早之前就听过这俩个名词，但是一直没有深入的去研究过，直到昨晚在床上想了一下，我自己做的业务需求是属于 防抖还是节流，越想越乱，随后在网上找了几篇文章翻阅了下，又想了几个实例来增加对这俩个知识点的认识！

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
节流：指定时间间隔内只会执行一次任务；

案例

防抖案例

现在一个视频网站，打开一个视频播放，我们想改变视频播放窗口的大小，我们需要在短时间内连续的触发resize事件，如果每次触发resize事件之后，都去改变播放器的大小，就会使得播放出现卡顿。怎么解决这个问题呢？我们可以使用防抖机制来通过最后一次触发resize之后修改播放器大小

代码

const antiShake = function(fn,delay) {
	let timer = null;
	return function() {
		if(timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(fn,delay)
	}
}

window.onresize = antiShake(function(){
	console.log('拖动一次')
},300)

节流案例

我们在一个网站中可能要监听滚动条的状态来实现图片懒加载的功能，如果我们直接在滚动条上绑定滚动事件的话，则会频繁触发，所以这个地方我们可以通过节流机制来实现定时去监听

代码

function throttle(fn,delay){
	let flag = true
	return function() {
		if(!flag) return;
		flag = false
		setTimeout(function(){
			fn.apply(this,arguments)
			flag = true
		},delay)
	}
}

window.onscroll = throttle(function(){
	console.log('定时执行')
},300)

对于节流，留一个思考题！在小程序中我们如果快速的点击了一个按钮，按钮可能会连续触发俩次效果，我们如何通过节流来避免这个问题呢？