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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gtLBTNq9mr3/article/details/81437571

函数



防抖


所谓防抖,就是指触发事件后在 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方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。


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


展开阅读全文

没有更多推荐了,返回首页