函数防抖和节流*（性能优化不错的选择）

Posted 2022-08-08 myfirstboke

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

两者区别在于函数节流是固定时间做某一件事，比如每隔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里面去写吧