JavaScript手写防抖和节流函数

henu_Newxc03

发布于 2022-05-05 18:09:56

5130

文章被收录于专栏：Newxc03的前端之路Newxc03的前端之路

🤓防抖

函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件，避免因用户的多次点击向后端发送多次请求。

应用场景

按钮提交场景：防止多次提交按钮，只执行最后提交的一次
服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次还有搜索联想词功能类似生存环境请用lodash.debounce

代码实现

function debounce(fn,wait){
	let timer=null;
	return function(){
		let context=this;
		args=[...arguments];
		//如果存在定时器的话，则取消之前的定时器重新计时
		if(timer){
			timer=null;
		}
		//设置定时器，使事件间隔指定时间后执行
		timer=setTimeout(()=>{
			fn.apply(context,args);
		},wait)
	}	
}

😎节流

节流是规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以在scroll函数的事件监听上，通过事件节流来降低事件调用的频率。

应用场景

拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间多次触发动画引起性能问题

代码实现

//时间戳版
function throttle(fn,delay){
	let preTime=Date.now();
	return function(){
		let context=this;
		args=[...arguments];
		nowTime=Date.now();
	}
	//如果两次时间间隔超过了指定时间，则执行函数
	if(nowTime-preTime>=delay){
		preTime=Date.now;
		return fn.apply(context,args);
	}
}
//定时器版
function throttle(fun,wait){
	let timeout=null;
	return funtion(){
		let context=this;
		let args=[...arguments];
		if(!timeout){
			timeout=setTimeout(()=>{
				fun.apply(context,args);
				tiemout=null;
			},wait)
		}
	}
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-30，如有侵权请联系 cloudcommunity@tencent.com 删除

lodash