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