JavaScript防抖与节流

防抖:防止一个函数在一段事件内疯狂执行
场景:
1.搜索框input事件
2.鼠标移动mousemove事件
3.视窗大小变化resize事件
原理:不希望一个事件在短时间内执行多次,所以设置一个定时器,在一段时间后才执行,在定时器的时间内有触发时间了,就取消上一个事件的定时器,避免上次事件发生,然后又重新设置了一个新的定时器。

<script>
    function debounce(fn, delay) {
        
        var timer = 0
        var _delay = delay
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn()
            }, _delay);
        }
    }
    function resize() {
        console.log("执行")
    }
    window.addEventListener('mousemove', debounce(resize, 1000))
</script>

节流:节省流量
场景:主要用在懒加载时请求数据,在来回切换页面的时候,不会平凡请求接口,减少服务器的压力。

<script>
    function debounce(fn, delay = 800) {
        var timer = 0
        var _delay = delay
        return function () {
            if (!timer) {
                timer = setTimeout(() => {
                    fn()
                    timer=0
                }, _delay);
            }

        }
    }
    function resize() {
        console.log("执行")
    }
    window.addEventListener('mousemove', debounce(resize, 1000))
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值