防抖,节流

前言

防抖是回城,节流是攻击

防抖和节流是前端开发中常用的函数优化,可以限制函数的执行频率,提升性能和用户体验。在日常开发中可以遇到一些需要对函数进行优化的场景,比如防止表单反复提交。

防抖、节流区别

防抖 :限制函数在一段连续的时间内只执行一次。当连续出发某个事件时,只有在事件停止触发一段时间后,才会执行函数。
节流 :按照固定的时间间隔执行函数。当连续触发某个事件时,每隔一段时间执行一次函数。

总结:防抖是在时间停止触发后延迟执行函数,节流是按照固定的时间间隔执行函数。

实现

防抖应用场景

1、按钮点击:当用户点击按钮时,使用防抖可以避免用户多次点击造成的多次提交或重复操作。

2、输入框搜索:当用户在输入框中输入关键字时,使用防抖可避免频繁发送请求,而是在用户停止输入一段时间后才发送请求,减轻服务器压力。

3、窗口调整:当窗口大小调整时,使用防抖可以避免频繁触发重排和重绘操作,提高页面性能。

immediate参数用于控制防抖函数是否立即触发,true立即触发,false过delay时间后触发。

javascript 复制代码
<button id="btn" @click="debouncedFunction()">按钮</button>
// immediate参数用于控制防抖函数是否立即触发,true立即触发,false过delay时间后触发
function debounce(func, delay, immediate) {
	let timer;
	return function () {
		let context = this
		let args = arguments
		if (timer) { // 一段时间内只执行一次,所以清空之前的时间
			clearTimeout(timer)
		}
		if (immediate && !timer) {
			func.apply(context, args)
		}
		timer = setTimeout(() => {
			timer = null
			if (!immediate) {
				func.apply(context, args)
			}
		}, delay)
	}
}
// 创建一个被防抖的函数
const debouncedFunction = debounce(() => {
	// 
}, 1000, false)

节流应用场景

1、页面滚动:当页面滚动时,使用节流可以限制滚动事件的触发频率,减少事件处理的次数,提高页面的响应性能。

2、鼠标移动:当鼠标在某个元素上移动时,使用节流可以减少事件处理的次数,避免过于频繁的操作。

javascript 复制代码
<button @click="throttledFunction()">按钮</button>
// 节流函数
const throttledFunction = throttle(() => {
	// 
}, 1000, false)
function throttle(func, delay, immediate) {
	let timer;
	return function () {
		const context = this
		const args = arguments
		if (timer) return // 每隔一段时间执行一次函数,所以等待上个函数执行完毕
		if (immediate && !timer) {
			func.apply(context,args)
		}
		timer = setTimeout(() => {
			timer = null
			if (!immediate) {
				func.apply(context, args)
			}
		}, delay)
	}
}
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript