防抖与节流

1.防抖Debounce

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

1.1应用场景

• 搜索框实时搜索：只需用户最后一次输入完，再发送请求
• 手机号、邮箱输入验证
• 窗口大小调整：只需窗口调整完成后，计算窗口大小，防止重复渲染

1.2 实现防抖函数

• 思路：延迟函数执行并重新计时以确保在一段时间内只执行一次函数

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 (() => {
    		// 箭头函数没有this、arguments，所以apply使用不用提前存，用的就是外部的
    		fn.apply(this, arguments) 
    	}, time)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.节流Throttle

• 每隔一段时间，只执行一次函数

• 侧重点在于隔段时间一次，隔段时间一次

2.1 应用场景

• 页面滚动加载，加载更多或滚到底部监听
• 高频点击提交，表单重复提交
• 谷歌搜索框，搜索联想功能

2.2 实现节流函数

• 时间戳实现：

function throttle (fn, delay) {
	let prevTime = Date.now();
	return function(){
		if(Date.now() - prevTime > delay){
			fn.apply(this, arguments)
			prevTime = Date.now()
		}
	}
}
1
2
3
4
5
6
7
8
9

• 定时器实现：

function throttle (fn, delay) {
	let timer = null
	return function() {
		if(timer) return
		timer = setTimeout (() => {
			fn,apply(this, arguments)
			timer = null
		}, delay)
	}
}
1
2
3
4
5
6
7
8
9
10