防抖、节流函数小结

防抖、节流函数主要是用来限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象的。

比如我在项目中遇到了输入查询的功能，在搜索框中输入文字调用查询接口搜索，返回与搜索框匹配的内容，想必大家也有写过这个功能。

先来一个大概的写法：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<input type="text" class="search" placeholder="搜索...">
	<script type="text/javascript">
		$("body")
			.on("keyup", ".search", function() {
				searchFunc();
			})
		var searchFunc = function() {
		    console.log('请求接口返回搜索内容。。。');
		}
	</script>
</body>
</html>

这是我们功能实现的雏形，但是运行起来会发现，只要我不断的输入，它就会不断地调用searchFunc 方法去请求接口，就是说我输入10次就会请求10次。这想想真是很糟糕，怎么优化这个问题呢？

接下来就要用到防抖思想了。

防抖其实就是加上一个定时器，规定它延迟一定的时间再去请求接口。

函数防抖实现：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<input type="text" class="search" placeholder="搜索...">
	<script type="text/javascript">
		$("body")
			.on("keyup", ".search", function() {
				searchFunc();
			})
		var timer = null;
		var searchFunc = function() {
			timer && clearTimeout(timer);
			timer = setTimeout(function() {
				console.log('请求接口返回搜索内容。。。');
			}, 5000);
		}
	</script>
</body>
</html>

加上了定时器之后，再运行看看，它不会再是输入多少次就请求多少次了。

而是延时5秒之后再去做一次请求。

需要注意的是：在这个5秒钟的时间里，你不断的输入，定时器会不断的被清除再重新设置一个。

举个例子：你第一秒的时候第一次输入内容，那它开始设置一个定时器并且延时5秒钟，等到第四秒钟的时候你再次输入内容，
此时程序是先把你之前设置的定时器先清除再给你重新设置一个新的定时器，这个定时器又延时5秒钟。

也就是说这个定时器以你这5秒钟时间内最后一次输入的为准。

这样就解决了频繁请求的问题。

另外，我们还可以使用函数节流来优化这个问题。

函数节流实现：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<input type="text" class="search" placeholder="搜索...">
	<script type="text/javascript">
		$("body")
			.on("keyup", ".search", function() {
				searchFunc(5000);
			})
			
			var lastTime = null, nowTime = null;
			var searchFunc = function(gapTime) {
				nowTime = new Date().getTime();
				if(nowTime - lastTime > gapTime || !lastTime) {
					console.log('请求接口返回搜索内容。。。');
					lastTime = nowTime;
				}
		}
	</script>
</body>
</html>

从代码可以看出来就是比较当前时间和 lastTime 的差值，当差值大于gapTime的时候就去调用接口。

函数节流的思想其实更简单：

就是给定一个时间gapTime（比如5秒钟）代表每隔5秒钟请求一次接口搜索。不管你怎么输入，我都是按部就班的每隔5秒钟请求一次。

好了，这就是函数防抖和函数节流的区别和使用。相信看到这里你也能理解是什么意思了。

至于什么时候用防抖什么时候用节流，还得具体问题具体分析。

防抖、节流函数 小结

猜你喜欢

防抖、节流函数小结