防抖事件

定义：持续触发事件，一定时间内没有触发事件，事件处理函数只会执行一次，当设定的时间内触发过一次事件后会重新开始延时。例：输入框的事件（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>