防抖和节流

小民小民

已于 2022-06-27 10:37:35 修改

阅读量517

点赞数 3

文章标签： servlet java 前端

于 2022-06-23 08:46:29 首次发布

本文链接：https://blog.csdn.net/weixin_49334139/article/details/125404842

版权

什么是防抖？为什么会产生防抖呀？

我们先看一段代码

   
    <input id="input" type="text">
    <!-- 设置一个输入框 -->
    <script>
        var a = document.getElementById("input") //获取输入框的id
        a.oninput=function(){
            console.log(this.value);//打印输入框的内容
        }
    </script>

在不设置任何限制条件的情况下仅仅是两个字就交互了9次，如果要是与服务器传输其消耗资源是非常浪费的

所以防抖要做的就是限制触发次数

防抖就是当用户事件触发过于频繁只要最后一次

   
    <input id="input" type="text">
    <!-- 设置一个输入框 -->
    <script>
        let a = document.querySelector("input") //获取输入框的id
         let b = null //设置一个节点
        a.oninput = function(){
            if(b !== null){ //判断节点是否为空
                clearTimeout(b) //清除计时器setTimeout
            }
            b = setTimeout(()=>{ //计时器计时停止操作1000ms后执行
                console.log(this.value); //打印输入框的内容
            },1000) 
        }
    </script>

代码执行结果

我们来优化一下代码

    
    <input id="input" type="text">
    <!-- 设置一个输入框 -->
    <script>
             // 这里我们来用闭包优化一下代码
        let a = document.querySelector("input")    //获取输入框
        a.oninput = fangdou(function(){     //这里调用fangdou方法
            // console.log();   //这里的this是指向window的，因为这里的function是没有被调用的
            console.log(this.value); 
        },1000)
        //这里是闭包
        function fangdou(fn,time){
            let b=null         //将全局变量私有化，减少了全局变量
            return function(){  //函数内嵌套的函数
                if(b !== null){  
                clearTimeout(b) 
            }
            b = setTimeout(()=>{ 
                // console.log(this);这里的this指向a
               fn.call(this)      //所以这里用call来改变传过来function的this指向
            },time) 
            }
        }
    </script>

节流呢？节流是什么？

   <style>
        body{
            height: 2000px; 
            /* 给页面一个滚动条 */
        }
    </style>
</head>
<body>
    <script>
        window.onscroll=function(){ //设置滚动事件
            console.log('111'); //滚动一次页面控制台输入一次"111"
        }
    </script>
</body>

在自身不设置任何条件的情况下，每滚动一次滚轮，就会触发一次事件，这是很难接受的。

节流：控制高频事件的触发次数。

所以节流与防抖相比节流就是控制访问次数。

  <script>
        let a = true  //给定一个变量为true
        window.onscroll=function(){ //设置滚动事件
            if(a){
                setTimeout(()=>{ //在这里设置一个定时器
                    console.log('111'); //滚动一次页面控制台输入一次"111"
                    a = true //异步执行是在其他执行完之后在执行的所以a在执行完整个function后还是true
                },500)
               
            }
             a = false //将a改为false方便下次执行
        }
    </script>

这样一个简单的节流就做好了。

疯狂滚动后只执行了4次，优化一下代码。

   
        window.onscroll=jieliu(function(){
            console.log('111');
        },500)

        function jieliu(fn,time){
            let a = true  //给定一个变量为true
            return function(){
                if(a){
                setTimeout(()=>{ //在这里设置一个定时器
                    fn.call(this)
                    a = true
                },time)
            }
             a = false //将a改为false方便下次执行
            }
        }

防抖主要应用在登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

节流主要应用的window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次

小民小民

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
防抖和节流

我们先看一段代码在不设置任何限制条件的情况下仅仅是两个字就交互了9次，如果要是与服务器传输其消耗资源是非常浪费的所以防抖要做的就是限制触发次数防抖就是当用户事件触发过于频繁只要最后一次代码执行结果节流呢？节流是什么？这样一个简单的节流就做好了。.........
复制链接

扫一扫