美文网首页
分享JavaScript节流与防抖

分享JavaScript节流与防抖

作者: 手心_d12a | 来源:发表于2020-12-18 14:25 被阅读0次

    1、概念:

    节流(英文 throttle),近义词:节制、阻塞,词汇:节流阀、油门等,在JS中的释义:当频繁触发同一事件时,规定时间内只成功执行一次,即保证在连续时间段内无论触发多少次同一事件而每隔规定时间都只执行一次。

    防抖(英文 debounce),近义词:防抖动、防反跳,在JS中释义:当频繁触发同一事件时,在每次事件触发后的规定时间内再没有触发该事件,则成功执行本次事件,即保证两次事件触发间隔超过规定时间时才执行一次。

    2、使用目的:

    节流与防抖都是为了限制函数的执行频次,以优化因高频操作导致的响应速度跟不上触发频率,出现延迟,假死或卡顿等现象的发生。

    即主要作用于性能优化,用户体验优化等。

    3、使用场景:

    A、点击按钮进行提交操作,频繁点击

    B、监听浏览器滚动条,频繁滚动

    C、搜索框输入内容后立即搜索,频繁请求数据

    实现代码及使用案例:

    原生js实现

    Lodash封装

    4、其他参考、拓展、延伸:

    现代JavaScript教程(调度、模块、Promise,async/await)

    深入理解定时器(两篇)

    相关文章

      网友评论

          本文标题:分享JavaScript节流与防抖

          本文链接:https://www.haomeiwen.com/subject/jswtnktx.html