您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

防抖与节流

本质上防抖和节流都是优化高频率执行代码的一种手法
如浏览器的resize、scroll、mousemove、keypress等事件在触发时,会不断的调用绑定在事件上的回调函数,极大的浪费资源,降低前端性能
为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用throttle(节流)和debounce(防抖)的方式来减少调用频率

节流:n秒内只运行一次,若n秒内重复触发,只有一次执行

//节流  简单的代码实现
//回调函数 以及时间
	function throttle(fn,delay){
		let timerId;
		return function(...args){
			if(!timerId){
				timerId = setTimeout(()=>{
					fn.apply(this,args);
					timerId = null;
				})
			}
		}
	}

	document.onscroll = throttle(function(){
		console.log('scroll事件被触发了'+Date.now())
	},1000)

防抖:n秒后在执行该事件,若在n秒内被重复触发,则重新计时

//防抖
function debounce(fn,delay){
	let timerId;
	return function(...args){
		timerId && clearTimeout(timerId);
		timerId = setTimeout(()=>{
			fn.call(this,args);
		},1000)
	}
}
document.getElementById('btn').onclick = debounce(function(){
	console.log('点击事件触发'+Date.now())
},500)

相同点:1.都可以通过使用setTimeout实现,目的都是降低回调执行频率,节省计算资源。
不同点:
1.函数防抖,在一段连续操作结束后,处理回调,利用clearTimeout和setTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次。
2.函数防抖关注一定时间连续触发的事件,只在最后一次执行一次,而函数节流一段时间内只执行一次
应用场景:
防抖触发场景:
搜索框搜索输入,只需用户最后一次输入完,再发送请求
手机号、邮箱验证输入检测
节流触发场景:
滚动加载,加载更多或滚到底部监听
搜索框,搜索联想功能


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进