防抖与节流

时间：2024-03-10 12:50:46

1.防抖Debounce

  • 指在某个事件频繁触发时，延迟一定时间后再执行回调函数。如果在延迟时间内又触发了同样的事件，那么会重新计时。
  • 多次触发，只执行最后一次

1.1应用场景

  • 搜索框实时搜索：当用户输入时，防抖可以用于延迟发送请求，避免频繁请求后端接口。
  • 表单输入验证：使用防抖函数可以延迟触发验证操作，只在用户输入完毕一段时间后进行验证，避免频繁的验证操作。
  • 窗口大小调整：当窗口大小调整时，防抖可以用于调整事件触发的频率，避免频繁操作导致页面抖动。

1.2 实现防抖函数

  • 思路：延迟函数执行并重新计时以确保在一段时间内只执行一次函数
<div><input type="text" id="debounce"></div>

const debounceDom = document.getElementById('debounce')
// 使用防抖函数，确保在连续触发 keyup 事件时只触发一次 ajax 函数
debounceDom.addEventListener('keyup', debounce(ajax, 500))

// 模拟一个 ajax 请求
function ajax() {
	console.log('这是一个请求');
}

// 实现防抖的函数
function debounce(fn, time) {
    let timer = null
    return function () {
    	if (timer) { //说明上次定时器还没有执行完 清除上次定时器
    		clearTimeout(timer)
    	}
    	timer = setTimeout (() => {
    		// 使用apply将函数fn的执行上下文设置为当前函数的执行上下文，并传入当前函数的参数
    		fn.apply(this, arguments) 
    	}, time)
	}
}

2.节流Throttle

  • 指规定一个单位时间（延迟 delay 时间），只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

  • 规定时间内，只触发一次

2.1 应用场景

  • 页面滚动加载
  • 频繁点击按钮
  • 鼠标移动
  • 键盘按键
  • 动画场景：避免短时间内多次触发动画引起性能问题
  • 拖拽场景: 在某些场景下，频繁触发位置变动会造成性能问题

2.2 实现节流函数

  • 用Date.now()获取时间来判断是否在规定时间内
function throttle (fn, delay) {
	let prevTime = Date.now();
	return function(){
		if(Date.now() - prevTime > delay){
			fn.apply(this, arguments)
			prevTime = Date.now()
		}
	}
}
  • 设置一个flag来标志
function throttle (fn, delay) {
	let flag = true
	return function () {
		if (flag) {
			setTimeout(() => {
				fn.apply(this, arguments)
				flag = true
			}, delay)
		}
		flag = false
	}
}

相关文章