JavaScript函数节流和函数防抖

-王二毛-

已于 2022-03-15 18:33:21 修改

阅读量75

点赞数

分类专栏： # JavaScript 文章标签： javascript

于 2021-06-08 11:29:43 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/117693987

版权

JavaScript 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、函数节流

函数节流:一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数节流</title>
		<script>
			/*
			 *fn要被节流的函数
			 *delay规定的时间
			 */

			function throttle(fn, delay) {
				//记录上一次函数触发的时间
				var lastTime = 0;
				return function() {
					//记录当前函数独发的时间
					var nowTime = Date.now();
					if (nowTime - lastTime > delay) {
						//修正this指向问题
						fn.call(this);
						//同步时间
						lastTime = nowTime;
					}
				}
			}

			document.onscroll = throttle(function() {
				console.log('onscroll' + Date.now());
			}, 1000)//鼠标滚动间隔1秒出发
		</script>
		<style type="text/css">
			html,
			body {
				height: 500%;
			}
		</style>
	</head>
	<body>
	</body>
</html>

二、函数防抖

防抖函数:一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数防抖</title>
		<script>
			window.onload = function() {
				/*
				 *fn要被防抖的函数
				 *delay延迟的时间
				 */
				function debounce(fn, delay) {
					//记录上一次的延迟器
					var timer = null;

					return function() {
						//清除上一次的延迟器
						clearTimeout(timer);
						//重新设置延迟器
						timer = setTimeout(function() {
							//修正this指向问题
							fn.call(this);
						}, delay);
					}
				}
				let b = document.getElementById('btn');
				b.onclick = debounce(function() {
					console.log('onscroll' + Date.now());
				}, 1000);
			}
		</script>
	</head>
	<body>
		<button id="btn">防抖按钮</button>
	</body>
</html>