首页 > 其他分享 >防抖与节流:教你倾听时插话的技巧

防抖与节流:教你倾听时插话的技巧

时间:2023-02-20 21:25:15浏览次数:47  
标签:触发 防抖 15 节流 插话 回应 执行

本文内容主要翻译自issue 中国外大佬对防抖与节流的解释, 后面补充了自己的理解和总结。

什么是防抖与节流

防抖和节流是处理“过于频繁”发生的事情的常用技术。想象一下,你和朋友见面,朋友正在给你讲一个故事,但他们说话时很难停下来。假设您想在可能的情况下不打断他们满足他们讲故事的兴致,同时还要回应他们所说的话。 (我知道这可能有点做作,但请耐心等待!)

假设你们永远不能同时说话。你有几个策略:

同步

你可以在他们说完每句话时做出回应:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08f295b7e32a467e94da9071c1a63262~tplv-k3u1fbpfcp-zoom-1.image

如果您的回复很短,这可能没问题。但是,如果您的回答较长,这可能会使他们很难讲完这个故事。所以这个策略不是很好。

防抖(Debounced

你可以等他们停止说话。例如,如果他们停顿的时间足够长,您就可以开始回应:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51573c40cc444895b6696844358771a9~tplv-k3u1fbpfcp-zoom-1.image

如果你的朋友偶尔会停下来,这个策略会很有效。但是,如果他们不停地说了几分钟,这根本不会让你回应:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60b3648f278f42458077e37066f32bd8~tplv-k3u1fbpfcp-zoom-1.image

节流(Throttled

您可以决定最多每分钟响应一次。在这里,您可以计算自己有多久没有说话了。一旦你一分钟没有说话,你就在朋友的下一句话之后插入你的回应:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82a76ff9575d4440b7481f1867b2435d~tplv-k3u1fbpfcp-zoom-1.image

如果您的朋友希望您在他们讲故事时做出回应,但他们不会为您做这件事而制造停顿,则此策略会很有帮助。但是,如果他们中间停顿了一会,但您仍在无缘无故地等待,此时双方都没说话,那就尴尬了:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/192fcaf36da64d0a9a1d189d2dfbc5e9~tplv-k3u1fbpfcp-zoom-1.image

含义解释

朋友的“句子”是按钮点击或键盘输入等事件。您的“回应”正在更新屏幕。

当用户做某事太快(例如打字)时,响应每个单独事件更新屏幕太慢。因此,您可以使用防抖或节流,要么等待用户停止输入(防抖),要么每隔一段时间更新一次屏幕,比如每秒一次(节流)。

补充举例

游戏中:防抖就是 B 回城,以按下的最后一下为准。节流就是 QWER,按一下再按得等技能冷却才能再按。

生活中:假设电梯有两种运行策略 防抖和 节流,超时设定为 15 秒,不考虑容量限制。

电梯第一个人进来后,15 秒后准时运送一次,这是节流

电梯第一个人进来后,等待 15 秒。如果过程中又有人进来,15 秒等待重新计时,直到 15 秒后开始运送,这是防抖

编程中:搜索页面,用户连续输入,等停下来再去触发搜索接口,这是防抖。

美团后台位置服务不能过于频繁地调用后台更新用户位置,必须以特定频率调用后端接口,这就是节流。

定义总结

防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时,所以防抖是操作时不执行不操作时执行。

节流: 高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率,到时候了必须执行一次。

图解说明

Untitled.png

图片来着Dart/Flutter 防抖与节流

为什么防抖有 trailing 模式和 leading 模式?

原因:您可能会发现防抖事件在触发函数执行之前等待,直到事件停止如此迅速地发生,这让您感到恼火。(trailing edge 的情况),为什么不立即触发函数执行,使其表现得与原始的未防抖处理程序完全一样?于是就有了 leading edge 的情况。

如果觉得文章对你有帮助,点赞、收藏、关注、评论,一键四连支持,你的支持就是我创作最大的动力。

❤️ 本文原创听蝉 公众号:码里特别有禅 欢迎关注原创技术文章第一时间推送 ❤️

标签:触发,防抖,15,节流,插话,回应,执行
From: https://www.cnblogs.com/xuge2it/p/17138950.html

相关文章

  • 00022.09 用字节流读写文件:FileInputStream和FileOutputStream
    用文件字节流读写文件目录文章目录​​用文件字节流读写文件目录​​​​前言​​​​一、InputStream​​​​二、使用字节流,来读取纯文本文件步骤​​​​三、复制任意......
  • js之防抖与节流
    一.本质 本质上二者都是优化高频率执行代码的一种手段。 一句话概括:防抖是碰到新调用就重置计时器;节流则是碰到新调用就无视。  比如:浏览器的resize、mouseover 等......
  • 图解 K8S OOM 和 CPU 节流
    介绍使用Kubernetes时,内存不足(OOM)错误和CPU节流是云应用程序中资源处理的主要难题。这是为什么?云应用程序中的CPU和内存要求变得越来越重要,因为它们与您的云成本......
  • 节流&防抖
    函数防抖(debounce)在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。functiondebounce(fn,delay){lettimer=null;returnfunction(){......
  • 还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
    本文正在参加「金石计划.瓜分6万现金大奖」。欢迎关注我的公众号:前端侦探众所周知,函数节流(throttle)是JS中一个非常常见的优化手段,可以有效的避免函数过于频繁的执......
  • js-防抖(简易版)
    /** *节流函数 */varcount=1;varcontainer=document.getElementById('container');functiongetUserAction(e){  //console.log(this)  //c......
  • js 防抖
    //防抖作用:防止重复触发事件varcount=1;varcontainer=document.getElementById('container');functiongetUserAction(e){  //console.log(this)  ......
  • 前端学习案例1-防抖和节流1
    ......
  • java防止频繁请求、重复提交(防抖动)
    在客户端网络慢或者服务器响应慢时,用户有时是会频繁刷新页面或重复提交表单的,这样是会给服务器造成不小的负担的,同时在添加数据时有可能造成不必要的麻烦。自定义注解/......
  • css节流
    众所周知,函数节流(throttle)是JS中一个非常常见的优化手段,可以有效避免函数过于频繁的执行。 举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为......