怎么新建MySQL数据库

发布时间：2022-07-07 作者：admin
阅读：247
本篇内容介绍了“JS节流与防抖的概念和区别是什么，怎么实现”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

   
 
  
  
 
 
  
节流与防抖
 

背景：当我们频繁去请求资源、接口等其他的时候，就会造成操作Dom频繁，接口压力大等等，性能下降。比如我有时候会每次搜索会猛地敲回车，在网络不很好的时候，点击下一页按钮的时候也会一直点，可能网络不好也可能服务器性能低。
 

为了避免频繁触发同一事件或请求，这时候就要用到节流和防抖了。
 

what？这是啥？当我第一次听到这两个名字的时候，心想是指节省流量、防止手抖吗。百思不得其解，赶紧就去学习。
 

 

 

概念：
 

简单来说：节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数，来降低压力，提高性能。
 

 

 

区别
 

节流：在一定的时间内只会请求一次。
 

可以理解为：公交车，每个人是一次点击请求，每十分钟开一趟车，发送请求
 

防抖：触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。
 

比如在一段时间内，我一直点击按钮，以最后一次点击为准发送一次请求。
 

 

 

节流实现
 

解决思路 ：
 
 

使用时间戳（发生在一段时间的开始），就是在计算
 

当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳 ，就执行一次函数
 

缺点：第一次直接触发 最后一次一段时间内无法触发
 

给一个场景，当我们搜索数据的时候，发起请求，没有做处理是这样的，请求肯定太过于频繁
 

 

 

 

节流函数
 

代码：
  

<body>
    <div>
        <span>节流处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
//节流函数
    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var last = 0;  //上一次结束的时间
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //执行函数
                last = cur //更新上一次时间
            }
        }
    }
</script>

  

效果：
 

 

 

 

防抖实现
 

解决思路 ：
 
 

定时器（发生在定时结束）。缺点：第一次不触发 最后一次延迟触发
 

就是设置一个定时器，如果一直点击则清除定时器，最后一次开启定时器
 

 

 

防抖函数
 

代码：
  

<body>
    <div>
        <span>防抖处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
    function debounce(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var time = null;  //定时器
        return function () {
            clearTimeout(time);  //清除定时器
            let context = this;  //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

  

效果：
 

 

 

 

防抖升级版
 

第一次触发和最后一次延迟触发
 

代码：
  

    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        let time = null
        let flag=true  //标识是不是第一次触发
        return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //触发定时器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

  

效果：
 

 

 

 

总结
 
 

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
 

节流与防抖
 

背景：当我们频繁去请求资源、接口等其他的时候，就会造成操作Dom频繁，接口压力大等等，性能下降。比如我有时候会每次搜索会猛地敲回车，在网络不很好的时候，点击下一页按钮的时候也会一直点，可能网络不好也可能服务器性能低。
 

为了避免频繁触发同一事件或请求，这时候就要用到节流和防抖了。
 

what？这是啥？当我第一次听到这两个名字的时候，心想是指节省流量、防止手抖吗。百思不得其解，赶紧就去学习。
 

概念：
 

简单来说：节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数，来降低压力，提高性能。
 

区别
 

节流：在一定的时间内只会请求一次。
 

可以理解为：公交车，每个人是一次点击请求，每十分钟开一趟车，发送请求
 

防抖：触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。
 

比如在一段时间内，我一直点击按钮，以最后一次点击为准发送一次请求。
 

节流实现
 

解决思路 ：
 
 

使用时间戳（发生在一段时间的开始），就是在计算
 

当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳 ，就执行一次函数
 

缺点：第一次直接触发 最后一次一段时间内无法触发
 

给一个场景，当我们搜索数据的时候，发起请求，没有做处理是这样的，请求肯定太过于频繁
 

 

节流函数
 

代码：
  

<body>
    <div>
        <span>节流处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
//节流函数
    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var last = 0;  //上一次结束的时间
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //执行函数
                last = cur //更新上一次时间
            }
        }
    }
</script>

  

效果：
 

 

防抖实现
 

解决思路 ：
 
 

定时器（发生在定时结束）。缺点：第一次不触发 最后一次延迟触发
 

就是设置一个定时器，如果一直点击则清除定时器，最后一次开启定时器
 

防抖函数
 

代码：
  

<body>
    <div>
        <span>防抖处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
    function debounce(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var time = null;  //定时器
        return function () {
            clearTimeout(time);  //清除定时器
            let context = this;  //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

  

效果：
 

 

防抖升级版
 

第一次触发和最后一次延迟触发
 

代码：
  

    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        let time = null
        let flag=true  //标识是不是第一次触发
        return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //触发定时器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

  

效果：
 

 

总结
     


以上就是关于“JS节流与防抖的概念和区别是什么，怎么实现”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。    

            

            

                
推荐阅读：

                
    
                                            
  1. 
                            
                                在HTML中如何让button居中，有几种方法
                            
                        
    2. 
                                            
  2. 
                            
                                CSS中flex布局如何实现自动换行？
                            
                        
    3. 
                                            
  3. 
                            
                                JS中怎样删除数组末尾元素？教你两种方法
                            
                        
    4. 
                                    

            

        


        

        
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。


        

                            节流与防抖
            
        

    

    

                    
上一篇：Vue项目优化打包的意义以及具体的操作是什么

                            
下一篇：vue中this.$set的使用是怎样，能解决什么问题 

            


    

        
相关阅读

        

            
        

    


                

                    

                        
                    

                


                

                    

                        二维码-群英
                        
长按识别二维码并关注微信

                        
更方便到期提醒、手机管理

                    

                    

                        

                            
7*24 全天候服务

                            
售前  400-678-4567
                            

                            
售后 
                                    0668-2555666

                            
                            
售后 
                                 400 678 4567
                            

                            
信息安全 
                                    0668-2555 118

                            
域名空间 
                                 3004329145
                            

                            
                        

                    

                


                

                    新用户注册，获新人礼包
                    管理控制台