专栏首页WebJ2EEJS:debounce、throttle

JS:debounce、throttle

浏览器中有一些事件会高频率触发,比如:

  • resize
  • scroll
  • mousemove
  • ...

如果我们监听这些事件,并按浏览器的触发频率响应,极可能造成页面卡顿、抖动,甚至浏览器崩溃。

图1:感受下 onScroll 的触发频率

debounce(防抖)和 throttle(节流)是一种编程技巧,用于控制某个函数在一定时间内执行多少次。主要用于平滑事件响应、减轻浏览器压力。

1. debounce(防抖)

debounce(防抖)策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。

举例:电梯门快要关了,突然有人准备上来,梯门会再次打开。只有当梯门完全关闭后,才开始运送。

图2:debounce 时序图

——图片来源:csdn,hupian1989

debounce 还有一个叫 leading edge debounce(前沿防抖)的变种,区别在于它是在周期开始的时候执行动作,而不是周期结束的时候。

图3:leading edge debounce 时序图

——图片来源:csdn,hupian1989

图4:debounce 动画演示

1.1. 应用示例

图5:在 onScroll 中应用 debounce

1.2. 哪里有现成的工具?

lodash 里面有:

_.debounce(func, [wait=0], [options={}])

underscore 里面也有:

_.debounce(function, wait, [immediate])

1.3. 基本原理

图6:最简单的 debounce 实现

1.4. underscore 的 debounce 实现分析

图7:underscore 的 debounce 实现分析

2. throttle(节流)

throttle(节流)的策略是在固定周期内,只执行一次动作,若有新事件触发,则不执行。周期结束后,又有事件触发,开始新的周期。

举例:从第一个人进入电梯后开始算,固定时长后准时运送一次。如果没有人,则不运行。

图8:throttle 时序分析

——图片来源:csdn,hupian1989

throttle 与 debounce 一样,也有一个 leading edge throttle 的变种;

图9:leading edge throttle 时序分析

——图片来源:csdn,hupian1989

2.1. 应用场景

图10:onScroll 事件中应用 throttle 技术

2.2. 哪里有现成的工具?

lodash 里面有:

_.throttle(func, [wait=0], [options={}])

underscore 里面也有:

_.throttle(function, wait, [options])

2.3. 基本原理

图11:最简单的 throttle 实现

2.4. underscore 的 throttle 实现分析

图12:underscore 的 throttle 实现分析

参考:

https://css-tricks.com/debouncing-throttling-explained-examples/ https://johnresig.com/blog/learning-from-twitter/ http://benalman.com/projects/jquery-throttle-debounce-plugin/

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-09

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS:XML 解析

    WEBJ2EE
  • JS:Web Storage API(localStorage、sessionStorage)

    Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观。Web Storage 包含如下两种机制...

    WEBJ2EE
  • React:Table 那些事(2)—— 解读 W3C 规范

    —— https://www.w3.org/TR/CSS22/sample.html

    WEBJ2EE
  • Testbench编写指南(4)自动化验证方法

    文章转自:https://blog.csdn.net/FPGADesigner/article/details/82023527

    碎碎思
  • 在 Vue 中使用lodash对事件进行防抖和节流

    有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面。例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒...

    前端达人
  • php设计模式-工厂模式

    设计模式参考地址:http://larabase.com/collection/5/post/143

    仙士可
  • 核心技术难突围,国产工业机器人路在何方?

    由于核心技术缺失,国产机器人厂商一直活得并不轻松,甚至有业内人士称,几乎所有做机器人本体的国产厂商都处于亏本或微利的状况。导致这种状况的原因,主要是外国厂商掌握...

    机器人网
  • “机器狗”比狗还灵巧:一口气爬90°直梯不在话下,了解一下?

    近来,各研究团队对足式机器人的研究可谓层出不穷。前两天文摘菌还发布了一篇关于“蜈蚣”机器人的文章,走一走、跳一跳都难不倒它。而今天这篇文章中神似波士顿动力的机器...

    大数据文摘
  • PHP获取指定函数定义在哪个文件中及行号

    当调试开源的代码时,希望查看某个函数的定义,那么就需要定位其位置。特别是有的项目中,函数会有多个地方都有定义,那么如果我想知道当前调用的这个函数是在哪里定义的,...

    大江小浪
  • 大疆无人机控制应用 DJI Go 4 监视用户? 谷歌已展开调查

    外媒报道称,安全公司Synacktiv和Grimm的研究人员表示,「大疆的无人机控制应用 DJI Go 4 可能并不安全。」

    新智元

扫码关注云+社区

领取腾讯云代金券