防抖(debounce)与节流(throttle)区别与实现

防抖与节流无论是在面试还是在平时使用中都是会经常遇到的，本文将介绍防抖与节流的特点，实现与使用场景

当我们直接使用监听输入框的input的时候，是下图的效果

2.gif

防抖(debounce)

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

特点

使用防抖处理之后，500毫秒内如果再次输入，会重新开始计时

1.gif

实现

function debounce(fn) {
            // 用来存放定时器的返回值
            let timer = null
            return function() {
                // 每次触发防抖的时候，把前面一个定时器清除掉
                clearTimeout(timer)
                timer = setTimeout(() => {
                    // 为了却表上下文环境为当前的this
                    fn.apply(this, arguments)
                }, 500)
                // 定义时间
            }
        }

适用场景

比如用户搜索框输入内容，不使用防抖用户每个输入的内容都会向后台发送请求，使用防抖之后，等到用户输入完毕后才会发送请求，减少服务器压力。

特点

无论你怎么输，每500毫秒触发一次函数

3.gif

节流(throttle)

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

实现

function throttle(fn) {
            // 保存一个标记
            let canRun = true
            return function() {
                // 说明函数还未运行
                if(!canRun) return
                canRun = false
                setTimeout(() => {
                    fn.apply(this, arguments)
                    // 运行完毕后设置为true，可以进行下次函数
                    canRun = true
                }, 500)
            }
        }

适用场景

懒加载监听浏览器滚动位置