V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ezshine
V2EX  ›  程序员

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

  •  1
     
  •   ezshine ·
    ezshine · 2021-05-17 09:50:46 +08:00 · 2195 次点击
    这是一个创建于 1047 天前的主题,其中的信息可能已经有所发展或是发生改变。

    节流防抖封面


    节流和防抖

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

    为什么要节流.gif

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

    节流( throttle )

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

    1. 时间戳版

    节流时间戳版.gif

    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("距离上次调用的时间差不满足要求哦");
            }
        }
    }
    

    节流时间戳版执行.gif

    2. 定时器版

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

    节流定时器版执行.gif

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

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

    防抖( debounce )

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

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

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


    你学会了吗?点赞、收藏的逢考必过,升职加薪,走向人生巅峰

    msaionyc
        1
    msaionyc  
       2021-05-17 10:07:04 +08:00 via iPhone
    挺好,我一个后端也能看懂,学到了
    ezshine
        2
    ezshine  
    OP
       2021-05-17 10:08:38 +08:00
    谢谢支持,[大帅老猿]( https://space.bilibili.com/422646817) 求关注。
    jackiecao
        3
    jackiecao  
       2021-05-17 10:36:25 +08:00   ❤️ 1
    名字真是高大上
    qwei
        4
    qwei  
       2021-05-17 10:51:09 +08:00
    大佬厉害,问:大佬动图用什么做的?
    zyxk
        5
    zyxk  
       2021-05-17 10:54:34 +08:00
    动画好评,我想问下您这个动画是用什么做的。
    ezshine
        6
    ezshine  
    OP
       2021-05-17 10:57:43 +08:00
    @qwei
    @zyxk

    一起回答你们哈,动画是用 keynote 完成的
    Hilong
        7
    Hilong  
       2021-05-17 10:59:54 +08:00
    @ezshine 牛皮,keynote 做的动画好流畅啊
    yazoox
        8
    yazoox  
       2021-05-17 11:08:52 +08:00
    主要是“学会了”,过两天,又忘了……
    arayinfree
        9
    arayinfree  
       2021-05-17 11:09:45 +08:00
    平时写请求,计算也会用到这样的方法,就是没想到名字这么高大上。。。
    really28
        10
    really28  
       2021-05-17 12:40:18 +08:00
    这样看来,同一个场景都可以用 「节流」或者 「防抖」来实现,两者实现的功能是一样的但是思路和原理稍有不同。
    Incineroar
        11
    Incineroar  
       2021-05-17 14:14:23 +08:00
    🐂的,这动画非常优秀,可以学习一个
    luxTao
        12
    luxTao  
       2021-05-17 15:29:52 +08:00
    这就是前端里的交互大师吗?
    10bkill1p
        13
    10bkill1p  
       2021-05-17 15:46:05 +08:00   ❤️ 3
    我一般这样记:一个是攻速,不管你按的多努力,规定的时间就是只能 A 出那几下;一个是不进 CD 的施法打断,直到最后一个技能指令不被覆盖为止。
    ezshine
        14
    ezshine  
    OP
       2021-05-17 16:42:28 +08:00
    @10bkill1p 哈哈,这个描述也是很贴切,谢谢分享
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2447 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 15:53 · PVG 23:53 · LAX 08:53 · JFK 11:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.