zoukankan      html  css  js  c++  java
  • 函数防抖和节流*(性能优化不错的选择)

    • 函数节流: 频繁触发,但只在特定的时间内才执行一次代码
    • 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码(如果一个事件被频繁触发多次,节流函数可以按照固定频率去执行对应的事件处理方法)

    两者区别在于函数节流是固定时间做某一件事,比如每隔1秒发一次请求。而函数防抖是在频繁触发后,只执行一次(两者的前提都是频繁触发)

    函数节流的应用场景一般是onrize,onscroll等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作,如果监听后执行的是Dom操作,这样的频繁触发执行,可能会影响到浏览器性能,甚至会将浏览器卡崩。
    所以我们可以规定他多少秒执行一次,这种方法叫函数节流

    function throttle(fn, threshold){
        var last
        
        var timer
        
        threshold || (threshold = 250)
        
        return function(){
            let context = this
            let args = arguments
            
            var now = +new Date()
            
            if(last&&now<last+threshold){
                clearTimeout(timer)
                
                timer = setTimeout(function(){
                    last = now
                    fn.apply(context, args)
                },threshold)
            }else {
                last = now
                fn.apply(context, args)
            }
        }
    }

    函数防抖的应用场景:输入框搜索自动补全事件,频繁操作点赞和取消点赞等等
    这些应用场景,也可以通过函数节流来实现,但是相对于函数防抖来说过于复杂,毕竟专业的事专人干

    实例场景:频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器

    // debounce函数用来包裹我们的事件处理方法
    function debounce(fn, delay){
        // 持久化一个定时器
        let timer = null
        
        // 闭包函数可以访问timer
        return function(){
            // 通过 this 和 arguments 获得函数的作用域和参数
            let context = this
            let args = arguments
            // 如果事件被触发,清除timer并重新开始计时
            clearTimeout(timer)
            timer = setTimeout(function() {
                fn.apply(context, args)
            }, delay)
        }
    }
    
    function foo(){
        console.log('You are scrolling!')
    }
    
    document.addEventListener('scroll', debounce(foo, 50));
    

      

    算了 我还是在vue里面去写吧

  • 相关阅读:
    数据库学习之四--Join, Left Join, Right Join, Full Join对比
    数据库学习之三--Select查询及运算符
    数据库学习之二--SQL语句以及数据类型
    随身笔记 Python中__init__和self的意义和作用
    爬虫Request Header请求头各参数含义
    爬虫中的Header请求头 在浏览器中通过F12和F5分析
    爬虫中的User-Agent 使用与作用
    Maven build 命令介绍(转)
    Linux 确定tomcat的运行状态命令
    Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.解决办法
  • 原文地址:https://www.cnblogs.com/myfirstboke/p/11383659.html
Copyright © 2011-2022 走看看