1.防抖和节流的定义
通俗来说
防抖就是 打联盟/王者 英雄回城的时候一直被打断,只有最后一次才能回城
节流:cd 放技能的时候cd没好 放不出来
2.作用:防抖的作用就是防止短时间内频繁操作DOM
以下是实现防抖的方法
<input type='text' placeholder='请输入'>
<script>
let inp = document.querselector('input')
//input事件只要input改变就会检测到
inp.addEventListener('input',antiShake(demo,3000))
//获取事件结束之后开始配置防抖方法
function antiShake(fn,time){
let timeOut = null
if(timeOut){
clearTimeout(timeOut)
}else{
timOut = setTimeout(demo,time)
}
}
function demo(){
console.log('事件被触发了')
}
</script>
以下是实现节流的代码
<style>
.box{
height:400px;
wight:400px
}
</style>
<div class='box'><div>
<script>
let box = document.querySelecter('.box')
box.addEventListenor('mousemove',thottle(demo,3000))
//以下是封装的节流函数
function thottle(fn,timer){
let time = null
return function(){
if(!time){
time = setTimeout(()=>{
event();
time = null
},timer)
}
}
}
function dome(){
console.log('事件被触发了')
}
</script>
防抖和节流都是一个闭包 都是内层函数调用了外层变量 容易造成内存泄漏