防抖和节流

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>

防抖和节流都是一个闭包 都是内层函数调用了外层变量 容易造成内存泄漏