防抖与节流

         防抖节流是前端开发中常用的两种性能优化技术,这篇就带大家了解一下防抖节流。

        首先我们需要了解什么是防抖和节流。

        防抖 (Debouncing) 是指在一定时间内,多次触发同一个事件,只执行最后一次操作。例如,当我们在搜索框中输入关键词时,输入框会不断触发 oninput 事件,如果每次输入都去请求服务器获取数据,会造成不必要的请求浪费。此时就可以使用防抖技术,将一定时间内的多次触发合并为一次操作,只请求一次服务器数据,减少了请求次数和服务器负载。

        节流 (Throttling) 是指在一定时间内,多次触发同一个事件,只执行第一次操作。例如,当我们拖动网页上的滚动条时,会不断触发 onscroll 事件,如果每次触发都去计算滚动距离,会造成浏览器性能下降。此时就可以使用节流技术,将一定时间内的多次触发限制为一次操作,只计算一次滚动距离,提高了浏览器性能和用户体验。

        这两种技术利用的都是延迟定时器,那接下来让我们用代码实现它们吧!

        防抖:主要思路就是每次点击,都会去执行recriveDebounceFun函数,这个函数是debounceFun返回来的函数,进入该函数,会首先判断定时器是否开了,也就是判断用户是否已经点击了,如果用户连续点击两次,那么当点击第二次的时候,就会清除第一次的定时器,也就是第一次白点击了,只会执行最后一次开的的定时器中的回调函数。代码如下:

//这个就是html里面的点击按钮,通过连续点击来展示效果
let debounceBtn = document.querySelector('.debounceBtn');
        let timer = null;

          //这个是封装的防抖函数,会返回一个函数
        function debounceFun(fn, delay) {
            return function(){
                if (timer) {
                    clearInterval(timer)
                }
                //这里arguments是当参数不确定时,可接受参数,是一个伪数组的形式
                let args=arguments;
                timer = setTimeout(() => {
                    //fn的this指向是不变,并且能够接收到参数
                    fn.apply(this,args);
                }, delay)
            }
        }

        //这里我们接收上面函数返回来的而参数
        let recriveDebounceFun=debounceFun(fn,1000)

        //这个是用户想要执行的操作
        function fn() {
            console.log(arguments[0]+arguments[1]);
        }

        debounceBtn.onclick = function(){
            recriveDebounceFun("我是参数","hello")
        }

        节流:代码整体长得和上面差不多,就只讲一下思路,它就像是一个空闲教室,一开始,没有班级上课,那么它就是空闲的,那么我们给它一个标记:isRun=true,当你们班要去上课,那么上课这件事 你可以作为定时器的回调函数,首先,应该判断这个教室是否是空闲的,如果不是,你们就无法上课,也就是如果按钮已经被点击并且没有执行用户给的函数时,你再点击也是没用的。当教室是空闲的,那么你们班就可以在此上课,此时我们需要标记一下:isRun=false,表示这个教室已经有人占用,那么其他人就不能进来。

let throttleBtn=document.querySelector('.throttleBtn');
        let isRun=true;
        function throttleFun(fn,delay){
            return function(){
                if(isRun){
                    isRun=false;
                    setTimeout(()=>{
                        fn.apply(this,arguments);
                        isRun=true;
                    },delay)
                }
            }
        }

        let receiveThrottleFun=throttleFun(fn,2000)
        function fn(){
            console.log(arguments[0]);
        }

        throttleBtn.onclick=function(){
            receiveThrottleFun("你好")
        }

        备注:关于arguments,可能很多人看到arguments有点蒙,它主要作用就是当函数的参数不确定时,我们就可以用arguments来接收,这里有个小案例:

function fun1(){
    let sum=0;
    for(let i=0;i

        

        就讲到这里啦!加油加油!

你可能感兴趣的:(前端,javascript,html)