JavaScript函数节流和函数防抖之间的区别

函数

防抖

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

let box = document.getElementById('box');

let timer = 0

box.onclick = function () {

    clearTimeout(timer)

    timer = setTimeout(() => {

        console.log(1)

    }, 1000)

}

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

函数

节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

let box = document.getElementById('box');

let timer = 0

    box.onclick = function () {

    if (!timer) {

        timer = setTimeout(() => {

            timer = 0

            console.log(1)

        }, 1000)

    }

}

函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。

总结

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。