手写防抖、节流

最新推荐文章于 2024-08-17 21:04:51 发布

影子想要晒太阳

最新推荐文章于 2024-08-17 21:04:51 发布

阅读量94

点赞数

文章标签：前端 javascript 面试

本文链接：https://blog.csdn.net/Z_znmy/article/details/131417456

版权

文章介绍了JavaScript中的防抖(debounce)和节流(throttle)技术，用于优化性能。防抖函数确保在规定时间后只执行一次，而节流则限制函数的执行频率，常用于处理scroll事件、搜索查询、表单提交和浏览器窗口resize等场景。

摘要由CSDN通过智能技术生成

1.防抖

原理
防抖是指在规定时间后只执行一次，每次点击时间重新开始计算
代码实现

function debounce(fn, delay = 500) {
	let timer = null;
	return function() {
		// 获取传参
		let args = arguments
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
			fn.apply(this, args)
		}, delay)
	}
}

应用场景
（1）scroll事件滚动触发
（2）搜索框输入查询
（3）表单提交
（4）浏览器窗口缩放，resize事件

2.节流

原理
持续触发事件时，每隔一段事件只执行一次
代码实现

function throttle(fn, delay) {
	let timer = null
	let prev = 0
	return function() {
		let args = arguments
		//获取当前时间
		let now = Date.now()
		clearTimeout(timer)
		//当两次点击差值大于设置的时间就执行
		if (now - prev >= delay) {
			fn.apply(this, args)
			prev = Date.now()
		} else {
			timer = setTimeout(() => {
				fn.apply(this, args)
			}, delay)
		}
	}
}