专栏首页膨胀的面包前端面试手写“节流防抖”你不会?用动画带你秒懂!

前端面试手写“节流防抖”你不会?用动画带你秒懂!

节流和防抖

这是前端面试中比较常见的一个问题,可能会让你现场手写。节流和防抖都是用来控制某些函数的调用频率。举个例子,在窗口 resize 的时候,由于可视区变大,我们可能需要向服务器请求更多内容来填充可视区。但可视区变大的过程中,resize 事件会被触发多次...每次触发都去请求一次的话没有必要...这时就需要节流防抖来做控制。

之前也写过一篇文章介绍了 vue 中如何使用防抖和节流,可以结合本文加深理解 https://blog.error.work/qd/59.html

function resize(e) {
    console.log("窗口大小改变了");
}
window.addEventListener('resize', resize);

节流( throttle )

当 resize 事件被触发后,指定时间内不允许再次触发,面试时要是遇到手写的话,可能会问到几种实现方式

1、时间戳版

function throttle(func, delay) {
    var last = 0;
    return function () {
        var now = Date.now();
        if (now >= delay + last) {
            func.apply(this, arguments);
            last = now;
        } else {
            console.log("距离上次调用的时间差不满足要求哦");
        }
    }
}

2、定时器版

function throttle(func, delay) {
    var timer = null;
    return function () {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        } else {
            console.log("上一个定时器尚未完成");
        }
    }
}

无论上述哪种写法,节流的意思就是函数在一段时间内的多次调用,仅第一次有效。

所以节流就像是一个看门大爷,每一段时间它只会放一个人进去。

防抖( debounce )

防抖和节流不同的地方在于,函数在一段时间内的多次调用,仅使得最后一次调用有效。

function debounce(func, delay) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            func.apply(this, arguments);
        }, delay);
    }
}

所以防抖就像是 PK 赛里的待定区,下一个待定的人会把上一个待定的人踢出局

via: 听说前端面试手写”节流防抖“你不会?用动画带你秒懂! - V2EX https://www.v2ex.com/t/777338#reply10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 LetterAvatar 实现纯前端生成字母头像

    偶然发现码云上有个非常人性化的细节:会自动给没头像的用户生成一个昵称首字符的彩色头像,关键是打开控制台一看,发现这头像居然还是在前端实时生成的 这就很有意思了!

    王图思睿
  • 老生常谈的函数防抖与节流

    https://github.com/ZengLingYong/Blog/issues/21

    前端迷
  • [OHIF-Viewers]医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.throttle(func, [wait=0], [option

    https://www.lodashjs.com/docs/lodash.throttle

    landv
  • React学习(七)-React中的事件处理

    props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作...

    itclanCoder
  • React基础(7)-React中的事件处理

    props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作

    itclanCoder
  • 实时音视频直播带货中影响用户体验的Bug根因

    短视频市场的引爆下,直播带货似乎一下子成了2020年实现财富自由的最佳途径之一,前有李佳琦、罗永浩、薇娅,后有董明珠 、刘涛、李小璐。

    ITester软件测试小栈
  • 【前端性能】高性能滚动 scroll 及页面渲染优化

    Sb_Coco
  • Autojs - 用 JavaScript 实现自己的安卓手机自动化工具脚本

    这个软件叫做 Auto.js,只支持安卓,是一个不需要 Root 权限的 JavaScript 自动化软件。什么意思呢,就是在你的安卓手机上安装这个 APP,...

    古时的风筝
  • 前端高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

    哲洛不闹
  • 别抖,OK? 操作系统抖动现象、网络抖动与延迟、函数抖动之防抖与节流,串讲

    偶然看到一个前端小伙伴写了篇“防抖与节流”,我就想啊,咱后端不也有些喜欢抖来抖去的嘛,我就总结一下吧。 想到几个写几个啊,如果还想看别的抖,可以在评论区留言哦...

    看、未来
  • 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用

    前端开发者对函数防抖和函数节流或多或少有些了解,最近在做一个H5编辑器的项目,由于画布功能复杂,计算量较大,在鼠标拖拽操作时尤其是在低配电脑上能够明显感受到卡顿...

    CS逍遥剑仙
  • 音视频常见问题分析和解决:延时和抖动

    在上一篇文章讲了音视频一些疑难问题的排查,其中一个比较重要的原则就是要将音视频作为一个系统来看待,问题有可能只是表现在播放端,但是根因有可能在编码端,也有可能发...

    潇湘落木
  • 阿里巴巴内推一面过程

    一面是有个人给我打的电话跟我约了一个面试时间,他们人真的很好,是按你的时间来,如果有事就可以往后延。然后我约了今天晚上7点半,于是就开始了我的一面,我面完试赶紧...

    @零一
  • 超详细由浅到深实现防抖和节流(内附笔记)

    比如我们的「百度搜索」,搜索的时候有关键字的提醒,关键字的来源来自于客户端向服务端请求得到的数据,我们通过「keyup事件」去监听触发请求,如果返回值的搜索ke...

    落落落洛克
  • Flutter实战 | 从 0 搭建「网易云音乐」APP(七、歌词(二))

    本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来。

    Flutter笔记
  • 移动端滚动研究

    在移动端如果使用局部滚动,意思就是我们的滚动在一个固定宽高的div内触发,将该div设置成overflow:scroll/auto;来形成div内部的滚动,这时...

    张炳
  • 手把手指点你解决直播卡顿

    随着移动直播的兴起,每个人都可以拿起自己的终端设备随时随地的尽情的直播,无论是在家里也好,户外也罢都可以享受其中。但是在直播的过程中你一定遇到过留言一堆卡导致用...

    高峰-pfgao
  • 未来的“抖音神曲”将Made in AI?

    7月24日消息,据国外媒体报道,字节跳动旗下的子公司抖音(海外名TikTok)又完成了一项收购。收购的对象为利用人工智能进行音乐编曲的英国初创公司-Jukede...

    AiTechYun
  • 前端进阶第4周打卡题目汇总

    1. 解释一下在js里,0.1+0.2为什么等于0.30000000000000004,如何通过代码解决这个问题?

    徐小夕

扫码关注云+社区

领取腾讯云代金券