JavaScript函数的防抖和节流

在前端开发中，经常会给元素添加一些事件，例如：click、scroll、input、mousemove。

这些事件会存在一些隐患，比如点击事件，用户点击时可能手抖连续点击了两次。

或者点击后发现没反应，频繁的点击按钮。

按钮一般都会与我们的后台服务有交互功能，请求数据接口等等。

如果像用户的操作一样，频繁去向服务器发送请求，这会占用很多不必要的资源，甚至出现bug。

防抖

函数防抖，如字面意思一样，防止用户手抖，多次点击，但是事件只需执行一次。

第一种： 快速点击时，只触发一次，然后停止点击一段时间后才能再次点击触发。

function fdFun(cb){
	let timeid; // 定时器id
	return function(){
		let curentFlag = !timeid; // 是否初始化了定时器，取反
		if(timeid) clearTimeout(timeid); // 如果定时器存在，则清除
		timeid = setTimeout(function(){ // 初始化定时器
			timeid = null; // 1s后，清空
		},1000);
		if(curentFlag){ // 如果没有定时器等待，就执行回调
			cb();
		}
	}
}
// 快速点击，1s内也只执行一次
document.querySelector('#btn').onclick = fdFun(function(){
	console.log('do something...');
});

第二种：快速点击不触发，最后一次点击停止后一段时间触发。

function fdFun(cb){
	let timeid;
	return function(){
		if(timeid) clearTimeout(timeid);
		timeid = setTimeout(function(){
			cb();
		},1000);
	}
}

节流

函数节流，意思是函数按照 一定时间规律执行，比如：快速点击时，每过1秒执行一次。

第一种：使用定时器实现

function jlFun(cb){
	let timeid;
	return function(){
		if(!timeid){ // 如果没有定时器等待就执行
			timeid = setTimeout(function(){ // 初始化定时器
				cb(); // 1s后执行回调
				clearTimeout(timeid); // 1s后清除定时器
				timeid = null; // 1s后将定时器id清空
			},1000);
		}
	}
}
document.querySelector('#btn').onclick = jlFun(function(){
	console.log('do something...');
});

第二种：使用时间戳记录实现

function jlFun(cb){
	let beforeTime = new Date(); // 记录下时间戳
	return function(){
		let waitTime = 1000; // 需等待的时间
		let nowTime = new Date(); // 当前点击时间戳
		if(nowTime - beforeTime >= waitTime){ // 当点击时的时间戳，大于等待时间则执行
			cb();
			beforeTime = nowTime; // 将上一次执行的时间，设置为这一次触发的时间戳
		}
	}
}
document.querySelector('#btn').onclick = jlFun(function(){
	console.log('do something...');
});

关注公众号【前端很忙】