前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >编程篇(018)-手写防抖(debounce)和节流(throttle)

编程篇(018)-手写防抖(debounce)和节流(throttle)

作者头像
齐丶先丶森
发布2022-12-05 14:02:59
4630
发布2022-12-05 14:02:59
举报
文章被收录于专栏:前端面试秘籍

参考答案:

代码语言:javascript
复制
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn, delay) {
    let timer = null // 借助闭包
    return function() {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(fn, delay)
    }
}
代码语言:javascript
复制
/*
* fn [function] 需要节流的函数
* delay [number] 毫秒,节流期限值
*/
function throttle(fn, delay) {
    let flag = true
    return function() {
        if (!flag) {
            // 休息时间 暂不接客
            return false
        }
        // 工作时间,执行函数并且在间隔期内把状态位设为无效
        flag = false
        setTimeout(() => {
            fn()
            flag = true;
        }, delay)
    }
}

解析:

防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间

举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发。

节流(throttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率

举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现 bug。

区别:防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-09-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端面试秘籍 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档