防抖:在事件触发后N秒内只执行一次 ,如果出发了重新计算执行时间。例如模糊搜索的keyup事件运用
<body>
<div><input id="name" value=""/></div>
</body>
<script>
let name = document.getElementsByTagName('input')
let keEvent = document.addEventListener('keyup',function(e){
eventDebonce(e.target.value)
});
function debounce (delay,callback){
let timer;
return function(value){
clearTimeout(timer)
timer = setTimeout(function(){
callback(value)
},delay)
}
}
let eventDebonce = debounce(1000,fn)
function fn(value){
console.log(value)
}
</script>
节流:连续触发事件,N秒内只执行一次
<body>
<div><button id = 'bttton'>点击</button></div>
</body>
<script>
document.getElementById('bttton').onclick = throttle(2000,fc)
function throttle(delay,fc){
console.log('ui')
let timeOut
return function(){
if(!timeOut){
timeOut = setTimeout(function(){
fc();
timeOut = null
},delay)
}
}
}
function fc(){
console.log(Math.random())
}