通俗易懂防抖与节流

原文地址

juejin.cn/post/701650…

防抖概念

• 我们先抛开概念不谈，其实在生活中也有很多防抖的例子： 比如你现在使用的电脑，在不使用后一段时间自动休眠 当你再次使用的时候重新激活，并开始你设置的时间倒计时10分钟 在这10分钟内你继续使用电脑又会重新开始倒计时10分钟 当你最后一次使用电脑并离开时重新倒计时10分钟过去了，电脑就休眠了 这其实这就是防抖的基本概念了~说白了就是在一段时间只执行一次，也就是我们上面的电脑只打开这一次。 我们上面的使用电脑可以理解为触发事件，而与我上面标注的setTimeout和clearTimeout其实就是防抖的主要要素了。 当然上面的是生活中的例子，那我们在我们的日常开发中其实也经常用到，比如我们调整页面的大小，验证表单某个字段是否重复时发生请求次数控制，防止表单多次提交等
• 防抖

const debounce = (fn, time) => {
    let timeID
    return function () {
        let arg = arguments//add函数中的this指向有问题
        console.log(arg, "arg");
        clearTimeout(timeID)
        timeID = setTimeout(() => { fn().call(this, arg) }, time)
    }
}

• 总而言之防抖就是在不断的操作中（输入、点击等）最终只执行一次的一种提高性能的方法。

节流概念

• 当然我们生活中也会有很多节流的的例子，不知道大家有没有留意过公园的洒水机：
• 一般我们会给洒水机设定一个时间假设30min 当距离上次洒水时间未够30min的时候一直保持静止状态 而当到了30min则会触发洒水的事件 这其实也是节流的最基本的概念了，说白了就是在间隔一段时间执行一次 我们上面的洒水可以理解为触发事件，而我们上面标注的其他信息也就只有30min和当前时间，这两个就是节流的主要要素了。 当然上面的是我们的生活中的例子，那我们在我们的日常开发中其实也经常用到，比如我们滚动鼠标滚轮监听滚动条位置，防止按钮多次点击等。
• 节流

const throttle = (fn, time) => {
    let timeDate = 0
    return function () {
        let timeDate_A = new Date()
        if (timeDate_A - timeDate > time) {
            setTimeout(() => { fn() }, time)
            timeDate = timeDate_A
        }

    }
}

• 总而言之节流就是在一段时间内不断操作而在你规定的时间内只执行一次的一种提高性能的方法