JavaScript中函数防抖、节流

码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html

函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。

以监听页面滚动为例,分别看一下普通滚动函数节流函数防抖三者的实现效果。

函数节流

函数节流:是指在高频事件触发期间,n秒内函数只会执行一次。

  • 比如人眨眼睛,就是一定时间内眨一次。
  • 再比如就是游戏中的技能CD,按下技能以后,再规定的时间内,你再按也没用,只能冷却好了再按。

使用场景:clickonMouseOveronMouseMoveresizeinputscroll

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
	clearTimeout(timer); // 清除未执行的代码,重置回初始化状态

	timer = setTimeout(function(){
		console.log("函数防抖");
	}, 1000);
};	

函数防抖的要点:也需要一个定时器来辅助实现代码延迟执行。如果计时未完之前,方法被多次触发,则清除上次记录的定时器标记,重新开始。若计时完毕,没有继续触发方法,则执行逻辑代码。

  1. 监听id = debounce元素的滚动事件,首先就是清除上次未执行的setTimeout的引用timer

  2. clearTimeout方法,允许传入无效的值。所以直接执行clearTimeout即可。

  3. 将需要执行的代码放入setTimeout定时器中,再返回定时器引用给timer缓存。

  4. 如果倒计时结束,没有新的方法触发滚动事件,则执行setTimeout中的代码。

  5. 函数防抖的原理,就是巧用setTimeout做缓存池,并且可以轻易地清除待执行代码。

函数防抖

函数防抖:是指触发高频事件n秒后函数会执行一次,如果n秒内高频事件被再次触发,则重新计算时间;在整个过程中,事件函数只会被执行一次。

  • 比如坐公交,在一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有没有人再刷卡了,司机才开车。
  • 再比如游戏中的buff,吃了bull,开始倒计时,此时又吃了一个buff,则重新记时。

使用场景:clickonMouseOveronMouseMoveresizeinputscroll

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
	if(!canRun){
		// 判断是否已空闲,如果在执行中,则直接return
		return;
	}

	canRun = false;
	setTimeout(function(){
		console.log("函数节流");
		canRun = true;
	}, 1000);
}

函数节流的要点:声明一个标志位,设置执行的时间间隔,记录当前代码是否在执行,如果空闲,则可以正常触发方法执行,反之则取消这次方法执行,直接return

  1. 监听id = throttle元素的滚动事件。当canRuntrue,代表当前滚动处理事件是空闲的,可以使用。然后下一步的操作就是canRun=false。这样其他请求执行滚动事件的方法,就被return。

  2. setTimeout设置1000ms时间间隔,执行定时器中的回调函数,释放标志位,允许执行下一次滚动事件。

  3. 若具体执行的方法是一个回调函数,也可以将canRun=true放到callback中。只要理解了函数节流基本原理,改造就会得心应手。

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!

2. 分享目的仅供大家学习和交流,请不要用于商业用途!

3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!

4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!

5. 如有链接无法下载、失效或广告,请点击后面字体→到投诉版块区举报,可领回失去的金币,并额外有奖!

6. 如遇到加密压缩包,默认解压密码为"www.ziyuanc.com",如遇到无法解压的请联系管理员!


资源之家 » JavaScript中函数防抖、节流

发表评论

  • 18会员总数(位)
  • 6548资源总数(个)
  • 62本周发布(个)
  • 0 今日发布(个)
  • 438稳定运行(天)

提供最优质的资源集合

立即查看 了解详情