js中的防抖和节流的常见用法,以及两者的区别

小结:js中的防抖和节流

防抖和节流的常见用法

防抖最常见的用法是在浏览器的滚动条的监听上

滚动条执行的次数是非常频繁的,滚动一次会让方法块中的代码执行很多次,我们不需要这么频繁的调用功能块,使用防抖来解决这个问题

//这里使用延时器进行了函数的防抖功能的实现
    let timer;
    window.onscroll = function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log('滚动条的位置:' + scrollTop);
        }, 200)   
        //当滚动条事件一直在执行的时候延时器一直被重复清空,
        //当滚动事件停止后延时0.2秒,延时器中的功能块才被调用。
    }

节流的一个使用场景是根据用户的输入内容进行实时的响应

用户在文本框中输入的内容使用keyup事件进行监听,用户每按下一个按键都会进行一次后台的校验,我们不需要这么频繁的校验次数,借助延时器进行功能块的节流操作

<body>
    <input type="text" id="userSay">
</body>

<script>
    let userSay=document.getElementById('userSay');//得到文本框元素
    
    userSay.onkeyup=throttle(function(){    //调用节流的功能块throtle
        //这里通常是是ajax的交互 暂时用log进行模拟
        console.log(userSay.value);   
    },1000)
    
    // 封装节流的函数
    function throttle(fn,delay){
        let flag=true;

        //闭包
        return function(){
            let self=this,args=arguments;
            //这句可以理解为 
        	//let self=this;用来保存this指向      
        	//let  args=arguments;用来保存函数中所有的引用的参数

            if(!flag){
                return;
            }
            flag=false;
            setTimeout(()=>{
                fn.apply(self,args);
                flag=true;
            },delay);
        }
    }
</script>

防抖和节流之间的区别

可以看出来,两者都是为了优化js中高频执行的代码的一种方法

类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

区别:

–>函数节流是指一定的时间内js方法只跑一次<-- 就像人眨眼睛,一定时间内眨一次眼睛,这是对于函数节流最形象的解释

函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行【可以参考常见用法的代码】

–>函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次<-- 比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车

函数节流的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码【可以参考常见用法的代码】

你可能感兴趣的:(Js,javascript)