防抖和节流

防抖(debounce)

1、定义

就是在连续的操作中,无论进行了多长时间,只有某一次的操作后,在指定的时间内没有再操作,这一次才被判定为有效。(事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。)

 2、应用场景

  • 搜索框搜索输入。只需用户最后一次输入完,再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

3、简单代码示例

// 1. 利用计时器,实现防抖。
// 2. 通过 setTimeout 的方式,在一定的时间间隔内,将多次触发变成一次触发。

function debounce(fn, delay) {
    let timer;
    return function () {
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(()=> {
            fn.apply(this, args); 
        }, delay);
    };
}

节流(throttle)

1、定义

在频繁的操作中,在规定时间内,只触发一次。比如我们设定500ms,在这个时间内,无论点击按钮多少次,它都只会触发一次

2、应用场景

  • 滚动加载,加载更多或滚到底部监听
  • 搜索框,搜索联想功能
  • 抢购的时候,无数人快速的点击按钮,如果每次点击都发送请求,就会给服务器造成巨大的压力,但是我们进行节流后,就会大大减少请求的次数

  • 防止表单提交按钮被多次触发,我们应该选择使用节流而不是防抖

  • 滚动加载,加载更多或滚到底部监听

3、简单代码示例

function throttle(fn, delay) {
    let timer;
    return function () {
        let _this = this;
        let args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            // 在delay后执行完fn之后清空timer,此时timer为假,throttle触发可以进入计时器
            timer = null;
        }, delay)
    }
}

目的:降低回调执行频率,节省计算资源 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值