分享JavaScript节流与防抖

1、概念:

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

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

2、使用目的:

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

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

3、使用场景:

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

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

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

实现代码及使用案例:

原生js实现

Lodash封装

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

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

深入理解定时器(两篇)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 节流(throttle)与防抖(debounce) 场景 因频繁执行DOM操作,资源加载等行为,导致UI停顿甚至浏...
    学编程的小屁孩阅读 3,375评论 0 0
  • 看了《JavaScript高级程序设计》和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖...
    编程小世界阅读 3,933评论 0 1
  • 背景 当我们进行窗口resize、scroll、input框内容校验等操作时,如果事件函数调用频率不加控制。会加重...
    夏末远歌阅读 2,656评论 0 0
  • 前言 最近和前端的小伙伴们,在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是,想深入研究一下两者...
    youthcity阅读 23,712评论 5 78
  • 在上周的开发中,又遇到点击保存多次请求数据重复的问题,所以下来学习了一下js的防抖和节流。通过学习了解到,在进行窗...
    any_5637阅读 2,994评论 0 2