js基础之函数的节流与防抖

最新推荐文章于 2024-07-20 14:49:34 发布

夕山雨

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量709

点赞数 6

分类专栏： js基础文章标签：函数节流函数防抖 setTimeout

本文链接：https://blog.csdn.net/qq_41694291/article/details/93979178

版权

js基础专栏收录该内容

20 篇文章 5 订阅

订阅专栏

函数节流和防抖的基本思想及应用场景

函数节流 (throttle)

基本思想：当一个事件在短时间内频繁触发时，通过超时调用来降低回调函数的执行频率。
代表性场景：高触发频率事件的降频。比如下面mousemove事件的监听：

function doSomething(){
	//执行一些操作
	...
}
document.addEventListener('mousemove', doSomething);

上面的代码为文档对象绑定了一个监听鼠标移动的事件。当鼠标在页面上连续移动的时候，监听器会频繁监听到这个事件（监听频率可能达到每秒几十次），并执行回调函数doSomething。这样，当鼠标在页面上连续移动的时候，js引擎每秒需要执行doSomething函数几十次，这显然会影响到网页的性能。如果页面上有很多类似的监听器，那网页非常容易卡死。

对于这种情况，我们就需要通过函数节流，来降低函数的执行频率，提升网页性能。

函数防抖(debounce)

基本思想：当一个事件在短时间内连续触发，且触发间隔小于设定的阈值时，暂时不执行回调函数，只在触发间隔超过一定的时间后才执行回调函数。
代表性场景：连续操作的延迟触发。比如现在用户正在填写邮箱，我们需要在用户输入的过程中检测邮箱格式是否正确，我们可能会写以下代码：

<input id="input"></input>
<span id="error"></span>
function validateEmail( email ){
	//通过正则表达式验证邮箱格式是否正确，这里暂不实现
	...
}
$("#input").on("input", function(){
	//如果格式不正确，就给出错误提示
	if( !validateEmail( $(this).val() ) ){
		$("#error").text("您的邮箱格式不正确！");
	} else {
		$("#error").text("");
	}
})

对于上述代码，每次用户输入新的字符，我们都会进行一次格式检查（如果输入速度特别快，受限于浏览器的响应速度，监听器可能无法每个字符的输入都监听到）。

显然，当用户在连续输入的时候，我们并不需要在每次输入时都进行检查（在没有输入完毕时一直提示用户邮箱格式错误是很讨厌的，我们不能让用户觉得讨厌！）。于是我们可以这么做：每次用户输入新字符后，我们就稍微等待一下（如2秒），如果用户没有继续输入新内容，我们就进行格式检查，否则就什么也不做。这样只要用户停止输入一段时间，我们就会告知用户邮箱格式是否正确，用户体验就会大大提升！

可能有人会问，为什么这里不绑定输入框的change事件？那是因为change事件只在输入框失去焦点后才会触发，我们不想让用户需要点一下其他地方才能知道邮箱格式是否正确。

实现原理

函数节流 (throttle)

我们通过一个外部变量作为“锁”，来控制当前回调函数是否可以执行，并用一个定时器来控制锁的打开和关闭。代码如下：

//设置“锁”，用来控制是否执行回调操作，初始时允许执行
var canRun = true;
document.addEventListener('mousemove', function(e){
	//如果当前不允许执行回调函数，直接返回
	if( !canRun ){
		return;
	}
	//把锁给锁上
	canRun = false;
	//我们输出当前鼠标的位置，来验证节流后事件的执行频率被降低
	console.log(e.x);
	//这里是我们需要在mousemove事件中执行的逻辑
	...
	//设置一个定时器，300毫秒后打开锁，允许执行下次回调
	setTimeout(function(){
		canRun = true;
	}, 300);
})

从代码可以看出，我们是通过canRun变量来控制回调函数是否可以执行的。

每次触发mousemove后，我们先检查有没有上锁，如果上锁了，就什么都不做；如果没有上锁，我们就执行操作，并上锁。之后我们添加一个超时调用（setTimeout），在指定的时间后打开锁，这样再触发mousemove事件后，就又可以执行操作了。

比如在本例中，我们就可以保证回调函数中的相关操作在300毫秒内不会重复执行。下面是节流前后的效果对比：
在这里插入图片描述
节流前光标位置的输出结果（输出频率较高）

节流后光标位置的输出结果（输出频率明显降低）

从图中可以看到，在连续快速移动鼠标时，如果不进行节流，我们每移动几个像素就会输出一次光标位置；而节流之后，移动几十甚至上百像素才会输出一次光标位置，回调函数执行的频率明显降低了！这对网页性能来说，是一个极大的提升。

函数防抖(debounce)

我们将相关操作放在一个超时调用里，如果在该调用生效之前就发生了下一次调用，我们就取消该次调用，将新的调用添加到任务队列中等待触发。如对于输入框的输入事件，我们将代码改为如下所示：

<input id="input"></input>
<span id="error"></span>
function validateEmail( email ){
	//通过正则表达式验证邮箱格式是否正确，这里暂不实现
	...
}
//超时任务的句柄，用于清除该任务
var timer;
$("#input").on("input", function(){
	//清除上次添加但未执行的setTimeout任务
	clearTimeout(timer);
	//用户在连续输入时清除可能存在的格式错误提示
	$("#error").text("");
	//重置setTimeout任务
	timer = setTimeout(function(){
		//如果格式不正确，就给出错误提示
		if( !validateEmail( $('#input').val() ) ){
			$("#error").text("您的邮箱格式不正确！");
		} else {
			$("#error").text("");
		}
	}, 2000);
})