JS中的节流和防抖

最新推荐文章于 2024-09-15 17:50:11 发布

原创最新推荐文章于 2024-09-15 17:50:11 发布 · 359 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

收录于

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了前端开发中常用的防抖和节流两种技术，通过实例展示了如何在搜索框输入和文本编辑实时保存场景中实现这两种效果。防抖确保在一段时间内仅执行最后一次操作，而节流则保证在设定时间内只执行一次函数，有效管理高频事件和滚动加载等场景。

1.防抖

概念：就是指连续触发事件但是在设定的一段时间内中只执行最后一次。例如: 设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行
核心：重新开始
应用场景：1.搜索框搜索输入 2.文本编辑器实时保存
代码实现思路：

let timerId = null;
document.querySelector('.ipt').onkeyup = function(){
	//防抖
	if(timerId !== null){
		clearTimeout(timerId)
	}
	timerId = setTimeout(() => {
		console.log("防抖函数")
	},1000)
}

2.节流

概念：就是指连续触发事件但是在设定的一段时间内中只执行一次函数例如: 设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次
核心：不要打断
应用场景：1.高频事件（快速点击鼠标滑动） 2.下拉加载 3.视频播放记录时间
代码实现思路：

let timerId = null;
document.querySelector('.ipt').onmouseover= function(){
	//节流
	if(timerId !== null){
		return
	}
	timerId = setTimeout(() => {
		console.log("节流函数")
		timerId = null;
	},100)
}