防抖事件
定义：持续触发事件，一定时间内没有触发事件，事件处理函数只会执行一次，
当设定的时间内触发过一次事件后会重新开始延时。
例：输入框的事件（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的金字塔
防抖（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
节流事件
定义：一段时间直只调用一次事件处理函数
实际用例：提交事件 、游戏的技能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)
})
完整的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>
