• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

js_防抖与节流(闭包的使用)

互联网 diligentman 45分钟前 3次浏览

js的防抖与节流

  • 防抖事件
  • 节流事件
  • 完整的html

防抖事件

定义:持续触发事件,一定时间内没有触发事件,事件处理函数只会执行一次,
当设定的时间内触发过一次事件后会重新开始延时。
例:输入框的事件(2s显示内容,不是实时刷新显示内容),对比输入框的内容事件。
实时刷新的效果

		<div class="container">
			<div class="left">
				<p>实时刷新显示内容</p>
				<input type="text" id="leftInput" />
				<div class='textDiv' id="textShow"></div>
			</div>
			
			<div class="right"></div>
		</div>
		<script>
			var inputDom=document.getElementById('leftInput');
			inputDom.addEventListener('keyup',function(e){
				var textDom=document.getElementById('textShow');
				console.log(e.target.value);
				textDom.innerText=e.target.value;
			})	
		</script>

输入123456会依次打印123456的金字塔
js_防抖与节流(闭包的使用)

防抖(1s内显示输入内容)

		<div class="container">
			<div class="left">
				<p>防抖(1s内显示输入内容)</p>
				<input type="text" id="leftInput" />
				<div class='textDiv' id="textShow"></div>
			</div>
			
			<div class="right"></div>
		</div>
		<script>
			// 防抖
			var inputDom = document.getElementById('leftInput');
			// 函数柯里化
			function debounce(delay, callback) {
				let timer
				return function(value) {
					//闭包内存泄漏
					clearTimeout(timer)
					timer = setTimeout(function() {
						//执行
						callback(value)
					}, delay)
				}
			}
			// 显示内容的函数
			function showText(value) {
				var textDom = document.getElementById('textShow');
				console.log(value)
				textDom.innerText = value;
			}
			var debounceFunc = debounce(1000, showText);
			inputDom.addEventListener('keyup', function(e) {
				let value = e.target.value
				debounceFunc(value)
			})
		</script>

1s内输入123456只会打印一次123456
js_防抖与节流(闭包的使用)

节流事件

定义:一段时间直只调用一次事件处理函数
实际用例:提交事件 、游戏的技能cd(在游戏cd中点击n次都不会发动技能)

// 节流
			var skillDom = document.getElementById('skillTriger');
			function throttle(wait,callback) {
				let timeOut;
				return function(value) {
					if (!timeOut) {
						timeOut = setTimeout(function() {
							callback(value);
							//执行一次,时间段内的都不知执行
							timeOut = null;
						}, wait)
					}
				}
			}
			function skillEvent(value){
				var textDom = document.getElementById('skillEventId');
				console.log(value)
				++count
				textDom.innerText = value+count;
			}
			var skillAc=throttle(3000,skillEvent)
			var count=0
			skillDom.addEventListener('click', function(e) {
				let value = e.target.value
				skillAc(value)
			})

js_防抖与节流(闭包的使用)

完整的html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖与节流</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 600px;
			height: 400px;
			background: #262626;
			display: flex;
		}

		.left {
			position: relative;
			width: 50%;
			height: 100%;
			background: #00cec9;
			box-sizing: border-box;
			overflow: hidden;

		}

		.right {
			position: relative;
			width: 50%;
			height: 100%;
			background: #b2bec3;
		}
	</style>
	<body>
		<div class="container">
			<div class="left">
				<p>防抖(1s内显示输入内容)</p>
				<input type="text" id="leftInput" />
				<div class='textDiv' id="textShow"></div>
			</div>

			<div class="right">
				<p>节流(3s内触发一次)</p>
				<input type="submit" id="skillTriger" value="发动技能" />
				<div class='skillEvent' id="skillEventId"></div>
			</div>
		</div>
		<script>
			// 防抖
			var inputDom = document.getElementById('leftInput');
			// 函数柯里化
			function debounce(delay, callback) {
				let timer
				return function(value) {
					//闭包内存泄漏
					clearTimeout(timer)
					timer = setTimeout(function() {
						//执行
						callback(value)
					}, delay)
				}
			}
			// 显示内容的函数
			function showText(value) {
				var textDom = document.getElementById('textShow');
				console.log(value)
				textDom.innerText = value;
			}
			var debounceFunc = debounce(1000, showText);
			inputDom.addEventListener('keyup', function(e) {
				let value = e.target.value
				debounceFunc(value)
			})

			// 节流
			var skillDom = document.getElementById('skillTriger');

			function throttle(wait, callback) {
				let timeOut;
				return function(value) {
					if (!timeOut) {
						timeOut = setTimeout(function() {
							callback(value);
							//执行一次,时间段内的都不知执行
							timeOut = null;
						}, wait)
					}
				}
			}

			function skillEvent(value) {
				var textDom = document.getElementById('skillEventId');
				console.log(value)
					++count
				textDom.innerText = value + count;
			}
			var skillAc = throttle(3000, skillEvent)
			var count = 0
			skillDom.addEventListener('click', function(e) {
				let value = e.target.value
				skillAc(value)
			})
		</script>
	</body>
</html>

js_防抖与节流(闭包的使用)


程序员灯塔
转载请注明原文链接:js_防抖与节流(闭包的使用)
喜欢 (0)