【js】防抖与节流

目录

一、前言

二、定义

三、代码实现

1、节流

2、防抖

四、区别

五、应用场景

---

一、前言

防抖和节流本质上都是优化高频率执行代码的一种手段。

如：浏览器的 “调整大小、滚动、按键、鼠标” 等事件在触发时 ，会不断调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。

为了优化体验和缓解服务器压力，需要对这类事件进行调用次数的限制，对此我们可以采用防抖和节流的方式来减少调用频率。

二、定义

节流：n秒内只运行一遍，若在n秒内重复触发，只有一次生效。

防抖：n秒后再执行该事件，若在n秒内被重复触发，则重新计时。

我们利用王者荣耀来举例：

节流：n秒内，只能点击一次技能，在我们点完技能的时候，会有一个技能冷却时间，在这个冷却时间内我们重复点击，也不会触发技能。

防抖：等待n秒后，才能成功回城。在等待回城途中，如果重新点击回城按钮，则重新开始计时。

三、代码实现

1、节流

        // 节流
        // 5秒内不管点击多少次  真正的代码只执行一次
        let preTime = new Date()//最开始的时间，页面同步代码执行完毕的时间
        console.log(preTime)
        btn.addEventListener('click',function(){
            // 事件处理函数只要被点击一定会执行
            // 条件是：点击事件发生的时间距离上一次时间要超过5s
            let nowTime = new Date()

            // console.log(nowTime-preTime)
            if(nowTime-preTime>5000){
                console.log('真正要执行的代码')
                // 当我的代码执行完以后，下次开始时间就是本次点击时间
                preTime = nowTime
            }
        })

2、防抖

        let inp = document.querySelector('input')

        inp.oninput = (function (timer) {
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    console.log(inp.value)
                }, 2000)
            }
        })()

四、区别

相同点：

• 都可以通过使用setTimeout实现
• 目的都是，降低调用频率。节省资源

不同点：

• 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
• 防抖适用于像搜索框这样需要输入完整关键字才会产生最终结果的场景；而节流则更适合于需要频繁触发但每次执行事件耗时较久的场景。

例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次。

五、应用场景

节流：

• 鼠标不断点击触发，mousedown(单位时间内只触发一次）
• 监听滚动加载，加载更多或滚到底部监听

防抖： 

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。