前端页面的防抖与节流

一.防抖

事件触发后固定时间内不会再次调用方法

    <div>
        <button onclick="count()">点击</button>
    </div>
    <div id='num'></div>
    <script type="text/javascript">
        let num = 1;
        let dom = document.getElementById("num")
        let timer;
        function count(){
            if(timer){
                console.log(222)
                clearTimeout(timer)
            };
            timer = setTimeout(()=>{
                dom.innerHTML = num++;
            },1000)
        }
    </script>

二.节流

一定时间内多次触发该事件，只会执行一次

    <div>
        <button onclick="count()">点击</button>
    </div>
    <div id='num'></div>
    <script type="text/javascript">
        let num = 1;
        let dom = document.getElementById("num")
        let timer;
        let isgo = true;
        function count(){
            if(isgo){
                dom.innerHTML = num++;
                isgo=false;
                setTimeout(()=>{
                    isgo = true
            },2000)
            }
        }
    </script>