防抖与节流的实现

1.防抖在html中的实现：

对input输入框进行防抖的实现：
在html页的body处添加一个输入框标签

 <input type="text">

然后在script标签中写如下代码(如果script标签在头部head声明要加上window.onload = function(代码区)):

<script>
        // 防抖  高频触发事件，只想要最后一次事件触发
        //获取input的DOM节点
        const input = document.querySelector('input')
        //设置输入事件
        input.oninput = debounce(function(){
        },1000);
        // 封装防抖代码  fn为业务代码函数，delay为设置的延时时间
        function debounce(fn,delay){
            let timer;
            return function(){
                if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(() =>{
                // 业务代码执行地
                fn.call(this);  //由于箭头函数没有this指向，所以要通过这个修改fn的指向，不然指向不到input
            },delay) 
            }
        }
    </script>

这样一个简单的封装防抖功能就完成了

2.节流在html中的实现

针对滚动条事件实现节流
先要使页面产生滚动条，即给它足够高的高度

    <style>
        body{
            height: 2000px;
        }
    </style>

然后在script标签中写如下代码：

 <script>
        // 节流  控制高频事件的触发次数
        window.onscroll = throttle(function(){
            console.log('滚动了');
        },1000)
        // 封装节流函数  fn为你要实现的函数代码，delay为延时时间
        function throttle(fn,delay){
            let flag = true; //判断当前延时时间内是否执行了一次函数，默认未执行
            return function (){
                if(flag){
                setTimeout(() => {
                    fn.call(this);
                    flag = true;
                }, delay);
            }
            flag = false;
            }
        }
    </script>