【前端面试题】防抖&节流

前端的小伙伴对于防抖、节流肯定不会陌生,日常开发中的一些业务场景很多会用到他们,而且这也是面试时常遇到的手写题目。不是很了解的小伙伴可以认真的看一看哦,很简单的。

 let num = 0;
    btn.addEventListener('click', debounce(handle, 2000, ['点赞', '分享']))

    // 两秒后,box元素的内容变为num;
    function handle(a, b) {
        num ++;
        box.innerHTML = num;
        console.log(a, b, num)
    }

    /**
        防抖 debounce
        触发某个动作,n秒后执行对应事件,若n秒内再次触发,则重新计时
        指定时间内多次触发某个操作,按最后一次来计时
        例: 点击地图指定区域,两秒后,上方弹出对应信息弹框; 频繁改变窗口大小resize; 搜索框keyup、keydown等触发后台请求;
        @param: handle - 需要触发的事件
        @param: delay - 间隔事件
        @param: argus - 参数数组
    */
    function debounce(handle, delay, argus) {
        let timer;
        return function() {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                handle(...argus);
                timer = null;
            }, delay)
        }
    }

    /**
        节流 throttle
        n秒内多次触发某个操作,只执行第一次; 例: 滚动加载; 
        @param: handle - 需要触发的事件
        @param: delay - 间隔事件
        @param: argus - 参数数组
    */
    function throttle(handle, delay, argus) {
        let onOff = true;
        return function() {
            if (onOff) {
                setTimeout(() => {
                    handle(...argus);
                    onOff = true
                }, delay)
            }
            onOff = false;
        }
    }

前端小菜鸟,哪里写的不对,还请各位大佬快快指出,非常感谢。
转载请注明出处,谢谢。
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值