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的金字塔
防抖（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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/310597.html
標籤：其他