防抖和节流实现一下简单的防抖&节流练练手，加深一下理解防抖原理就是事件触发后延迟一定时间执行，在此期间如果重复触发了

实现一下简单的防抖&节流练练手，加深一下理解

防抖

<body>
    <input type="text" id="txt">
    <script>
        var timer=null //防抖timer
        var txt=document.querySelector("#txt")
        function debounce(keycode){
            timer=setTimeout(function(){
                console.log(keycode);
            },1000)
        }
        txt.onkeyup=function(){
            clearTimeout(timer)
            debounce(this.value)
        }
    </script>
</body>

原理就是事件触发后延迟一定时间执行，在此期间如果重复触发了该事件，则刷新定时器的时间，用这种方法可以有效减少发送请求的次数，一般多用于搜索框

节流

    <script>
        var doc=document.documentElement
        var timer = null
        doc.onmousemove = function () {
            if (timer) {
                return
            }
            timer = setTimeout(function () {
                console.log("触发");
                timer = null
            }, 1000)
        }
    </script>

这里用的是比较简单的实现方式，用if进行判断，强制让事件在一定时间内只能触发一次，减少事件触发的频率，多用于鼠标滚动事件

防抖：减少请求，保证最后一次触发生效

节流：减少事件触发的频率