JavascriptJS防抖与节流

0

JS防抖与节流

防抖 节流 阅读:18 时间:2021年11月16日

如我们有个需求:在窗口大小改变后,计算窗口的宽高比。可能代码如下:function calc() {     console.log(window.innerWidth / window....

如我们有个需求:在窗口大小改变后,计算窗口的宽高比。

可能代码如下:

function calc() {
    console.log(window.innerWidth / window.innerHeight)
}

window.addEventListener('resize', calc)

这可以满足需求,但是当我们拉动窗口大小时发现,控制台的输出频率非常高,造成不必要的消耗。实际上我们只需要在拖动窗口结束时计算一次就可以。

所以要根据需求,做防抖或节流来优化实现。


一、防抖

1.1 什么是防抖

如果短时间内大量触发同一事件,只会执行一次函数。

1.2 实现

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {        
        if(timer){
            clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
        }
        timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
    }
}

那我们上面的需求代码就可以改为

function calc() {
    console.log(window.innerWidth / window.innerHeight)
}

function debounce(fn,delay){
    let timer = null
    return function() {        
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(fn,delay)
    }
}

window.addEventListener('resize', debounce(calc, 300))

那如果在改变窗口大小的过程中,就希望开始计算呢?这就要用节流

二、节流

2.1 什么是节流

如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效

2.2 实现

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间,执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

那我们上面的需求代码就可以改为

function calc() {
    console.log(window.innerWidth / window.innerHeight)
}

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间,执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

window.addEventListener('resize', throttle(calc, 300))


三、更多的应用场景与总结

如:滚动条高度获取,提交按钮的连续点击造成重复提交,输入框内值变化时事件的响应等

本文只以最简单实现,用来快速学习防抖与节流的实现思路,代码不健全不建议直接使用。


参考资料: https://segmentfault.com/a/1190000018428170


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^