JS函数防抖与节流

先介绍概念,函数防抖节流

函数防抖

概念

某个函数在n秒后执行,假如在n秒之内又有事件被触发了,则重新开始计时。
例如:人进入电梯之后,电梯门从人进入到关上门再到开始上下运行中间花费的时间为10秒,假如在这10秒之内又有其他的人进入电梯了,那之前的时间计算就会被终止并重新开始计算。也就是在某段时间之内一个事件被触发多次,只有最后一次会被执行
适用场景:表单提交时假如用户疯狂的快速多次点击提交按钮时,使用函数防抖只会让最后一次的点击事件被触发,即:表单提交事件只执行一次。

代码如下:
function debounce(fn, wait) {
	let timer = null;
	return function() {
		if (timer) {
			clearTimeout(timer);
		}
		const args = arguments;
		timer = setTimeout(() => {
			fn.apply(this, args);
		}, wait)
	}
}

从以上代码来看,debounce函数返回了一个匿名函数(注意不能写成箭头函数),不能改变fn函数的上下文执行环境,且使用了一个闭包将timer这个变量封存了起来。所以每次能进行清除及赋值操作。

函数节流

概念

函数节流就是相同时间间隔内某个事件只能执行依次。
例如:浏览器滚动条的滚动事件window.onscroll 这个函数。一旦滚动条发生了滚动之后,每隔几十毫秒就会触发一次。触发的频率越高要处理的操作就要重复执行多次,就会造成卡顿等现象。
解决办法:通过函数节流让浏览器滚动条的事件在触发之后,隔稍长的一段时间再去执行回调函数,降低事件的执行频率。

代码
function throttle(fn, wait) {
	let prev = new Date();
	return function() { 
	    const args = arguments;
		const now = new Date();
		if (now - prev > wait) {
			fn.apply(this, args);
			prev = new Date();
		}
	}
}
### 回答1: JS函数防抖节流是两种不同的技术,用于解决类似的问题。 防抖(debounce)指在一定时间内只执行一次函数,如果在这段时间内再次触发函数,则重新计时。这通常用于用户输入或窗口调整等场景,以防止不必要的计算或请求。 节流(throttle)指在一定时间内只执行一次函数,如果在这段时间内再次触发函数,则忽略。这通常用于限制事件的频率,例如鼠标滚动或网络请求。 总的来说,防抖节流都是为了避免因频繁的事件触发导致的性能问题。 ### 回答2: JS函数防抖节流是两种常用的优化手段,用于控制函数的执行频率,减少不必要的资源消耗。 函数防抖的原理是当事件触发后,不立即执行函数,而是等待一段时间(如1000毫秒),如果在这段时间内没有再次触发该事件,则执行函数;如果在该时间段内再次触发了该事件,则重新计时,等待一段时间后再执行函数函数防抖常用于限制高频率触发的事件,比如输入框中的搜索功能,用户连续输入时,只有在停止输入一段时间后,才会执行搜索操作。这样可以减少请求次数,避免不必要的资源浪费。 函数节流的原理是规定一个单位时间,在这个单位时间内,只能执行一次函数。如果在单位时间内多次触发了该事件,只有第一次触发会执行函数,其他触发会被忽略。函数节流常用于限制高频率触发的事件,比如页面滚动时的加载更多功能,用户快速滚动页面时,只会在固定的时间间隔内触发一次加载更多。 总结来说,函数防抖是等待一段时间后执行函数,期间事件还会重新计时,确保函数只在最后一次触发后执行;而函数节流是按照固定的时间间隔执行函数,不管触发次数多少,只在规定的时间间隔内执行一次函数函数防抖更适合控制高频率触发的事件,而函数节流更适合控制单位时间内触发的次数。 ### 回答3: JS函数防抖节流都是用来控制函数执行频率的技巧,但它们的实现方式和应用场景有所不同。 函数防抖是指在事件触发后,等待一定时间之后再执行函数。如果在这个等待时间内再次触发了该事件,就会重新计时。防抖的主要作用是减少函数执行的频率。常见的应用场景有输入框的关键词搜索,用户在输入过程中频繁触发输入事件,而我们希望用户停止输入后再进行搜索操作。使用函数防抖可以避免用户每输入一个字符都进行搜索,减少服务器负载。 函数节流是指在一定时间间隔内只执行一次函数。相比于函数防抖函数节流更注重于函数执行的间隔时间。如果在指定的时间间隔内多次触发了该函数,只有在间隔时间到达后才会执行函数。常见的应用场景包括页面滚动事件、窗口大小改变事件等。通过函数节流,我们可以控制事件响应的频率,避免过于频繁的函数执行。 总结起来,函数防抖适用于限制函数执行频率,主要用于输入框搜索等场景。而函数节流适用于限制函数连续触发的频率,主要用于页面滚动、窗口大小改变等场景。两者的区别在于对时间的处理方式,一个是等待一段时间后执行,一个是一段时间内只执行一次。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值