当前位置：首页 > news >正文

关于防抖和节流在前端开发中的应用

news 来源：原创 2024/5/17 15:15:42

防抖(debounce)和节流(throttle)本质上都是为了优化用户在高频执行代码的方法。

前端开发常见的高频操作比如，用户不停的点击form表单的submit按钮进行提交，浏览器就会一直发送http请求，这浪费了很多的带宽资源的同时也增加了服务器的压力。再比如浏览器上的resize、scroll、keypress、mousemove等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低应用性能，为了优化体验，需要对这类事件进行调用次数的限制，就可以采用防抖debounce和节流throttle的方式来减少调用频率。

下面我们分别举例来说名二者的区别和优缺点：

防抖(debounce):
顾名思义，用来防止手抖多次触发事件的，主要实现方法是设置延时器，短时间高频率触发只有最后一次触发成功

解释：比如点击提交后，设置一个定时器，间隔1s再发送请求，如果 1s内多次请求，则清除定时器，1s后重新发送请求。也就是说，在1s内无论点击提交多少次，最后一次总是会清除上一次的延迟，继而进行自身请求。
代码：

	/**
	**@param{fun: function} 需要防抖执行的函数
	**@param{delay: number} 延迟时间
	*/
	const debounce = (func, delay = 1000) => {
		let timer = null   // 存储定时器的timerId
		return function(...args) {
			// 在每一次调用函数时，都清除上一次的定时器
			if (timer) clearTimeout(timer)
			// 开启一个定时器
			timer = setTimeout(() => {
				func.apply(this, args)
			}, delay)
		}
	}

优点：无论你如何乱点，也只有最后一次会请求成功。
缺点：响应时间太久，即一直点的话一直在清除定时器并重新发送请求，所以需要等到停下来才会发出去请求。

节流(throttle)：
顾名思义，节约流量，设置状态锁，短时间高频率触发只有第一次触发成功。

解释：节流就是设置状态锁，比如设置一个state作为状态锁，锁一开始是关闭的，即state值设置为false。当你点击时，会对state进行判断，如果state为false，未上锁，那么开始发起请求，并且给state上锁，即设置state为true。如果你继续点击，则对state进行判断，发现state上锁了，则不发起请求，点击无效。当请求完成后，state设置为false，则下一次请求前判断此时的state为false，就可以发送新一轮请求了。
代码：

let state = true
ele.onclick = function() {
	// 点击第一次发送请求
	if (state) {
		// 发送请求立即给 state 赋值为 false
		state = false
		// 异步请求
		setTimeout(() => {
			console.log('xhr响应成!')
			// 在响应回调中将锁打开，等请求返回响应才可以触发第二次请求
			state = true
		}, 1000)
	}
};