问题标签 [debouncing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
34 浏览

javascript - 在不可避免地重新绘制巨大的渲染树时改善用户体验

我有一个巨大的 SVG,它有很多图形元素,鼠标滚轮缩放事件被触发,重新绘制整个 SVG。通过一些分析,我可以分解此类事件所花费的时间,

  • 转换 SVG 所需的计算需要 1-2 毫秒。
  • 应用转换后,绘制操作需要 500 毫秒-1.5 秒(非常缓慢的用户体验)。

据我了解,绘制操作将取决于 SVG/HTML 的渲染树,在这种情况下它相当大。我想过尝试以下方法来改善用户体验

  1. 使用“去抖动”,以便在给定的时间间隔内将多个滚动事件合并为一个信号。
  2. 可能将“requestAnimationFrame”与“去抖动”一起使用。
  3. 寻找优化 SVG 渲染树的方法,尽管由于其他限制,我觉得这在我的情况下很困难。

这些是正确的方式还是我朝着错误的方向前进?在重新绘制不可避免的情况下,可以使用哪些其他技术来获得更流畅的用户体验?

0 投票
1 回答
88 浏览

javascript - Javascript Key Event - 只有在重复的关键事件时才会出现 Debouce?

用例

  1. 我有一个人或组列表(如在 FB Messenger 中)(左窗格)
  2. 当我换人时,我会加载消息(API 调用)。
  3. 如果我快速按下向下箭头,那么我不想为每个人进行 API 调用,而是只想加载我暂停并等待的人。
  4. 目前我正在去抖 300 毫秒来实现这一点。

    /li>

问题

  1. 当我在 Message1 时 - 已加载 M1 详细信息
  2. 当我快速按键时 - M2 将加载,然后下一条消息会发生反跳)

我想避免这种 M2 负载。我不确定是否可以在同一流程中混合去抖动和非去抖动

0 投票
1 回答
250 浏览

angularjs - 使用 Angular debounce 时如何防止由于导航导致的数据丢失?

我最近熟悉了 Angular 的去抖动功能。我的 debounce 用例是我想保存(服务器端)用户在键入时键入的内容,但我不希望每次击键都有 HTTP 请求。给我的表单设置一个 500 的去抖动值允许在用户停止输入半秒时保存数据,而无需单击 [保存] 按钮。这非常方便。

但是,我发现了一个缺点。特别是如果去抖值很高(我可能希望它取决于有效负载的大小),用户可能会在保存数据之前离开页面。

在上面的示例中,用户可能会键入“Hello!”,等待半秒钟,然后键入“Great to meet you!”,然后导航到另一个页面或在去抖时间到期之前关闭浏览器。(这并不牵强,尤其是在文本输入靠近导航控件的情况下。)在这种情况下,“你好!” 得救了,但“很高兴认识你!” 迷路。

我已经看到页面(通常是充满广告的页面)在您离开页面时会触发令人讨厌的 Javascript,所以我想知道 Angular 是否有一些功能可以执行当用户离开页面时去抖动期到期时会发生的任何事情.

当然,我知道有一些特殊情况,比如掉电,无论如何还是会导致数据丢失!

0 投票
3 回答
8276 浏览

javascript - 使用 Jasmine 在 AngularJS 中测试去抖函数从不调用该函数

我在使用下划线去抖动的服务中有一个方法。

该方法内部是对不同服务上的方法的调用。我正在尝试测试是否调用了不同的服务。

在我尝试测试去抖动方法时,从未调用不同服务的方法,并且 jasmine 失败并显示:

“预期的间谍 aMethod 已被调用。”

我知道它被调用的事实(它在 chrome 中记录到控制台),它只是在期望已经失败之后被调用。

所以......(最好)在不添加 Sinon 或其他依赖项并且
为解决方案提供奖励积分*的情况下,不必将 _.debounce 变成 $timeout...

怎么做?

测试:

为什么 AngularJS 测试之神抛弃了我?

*我不知道如何在stackoverflow上给出实际的奖励积分,但如果可能的话,我会的。

0 投票
1 回答
112 浏览

javascript - 在 JointJs 中的 validateConnection 之上添加去抖动

我正在努力处理由 JointJS 中的节点和链接组成的图

我想防止在某些规则的基础上在节点之间创建特定链接(例如,避免循环)。

为此,我在论文的 validateConnection 属性中实施了一些检查。

问题是执行这些检查可能需要一些时间,通常比执行 validateConnection 函数的频率长(即每次鼠标改变位置时)。

所以我考虑等待新的检查,直到前一个检查完成。不幸的是,通过这种方式,解决方案受死锁问题的影响很大。

所以我的最后一个想法是去抖动检查功能。但我仍然不是 100% 满意。实际上,我需要对检查功能进行完全评估,并且在检查结束时设置属性 validateConnection。

在那里你有代码:

0 投票
0 回答
365 浏览

node.js - NodeJS 可写流去抖动

我最近实现了一个可写流,它将来自多个可读流的聚合数据保存到一个 mongo 数据库中。由于流的高吞吐量,我希望实现一些去抖动功能。

我正在努力寻找一种好的方法来做到这一点,麻烦来自需要在管道中施加背压。本质上,如果 debounce timeout 执行,Writeable 'next()' 回调只需要在 timeout 函数完成后调用,但如果 timeout 尚未执行,Writeable 需要立即 'next()' 来维持流程.

我觉得我在这里错过了一些简单的东西,希望这里有人能让我踢自己。

_write() 逻辑解释/TLDR:

0 投票
2 回答
203 浏览

javascript - 全页滚动

我需要实现平滑的整页滚动。我已经在这个页面上做到了:

http://superhostitel.cz/sluzby

但是当我用滚轮滚动更多时,它会滚动更多页面。请问,如何设置只滚动一页?

我的代码:

0 投票
6 回答
8890 浏览

javascript - 将 debouncer 与 React 事件一起使用

我有一个onchange需要去抖动的字段的事件,我为此使用下划线,但是当我使用去抖动器时,传递给 React 处理程序的事件似乎已过时。

我收到此错误:

警告:出于性能原因,此合成事件被重用。如果您看到这一点,则表示您正在对已发布/无效的合成事件调用 preventDefault。这是一个无操作。有关更多信息,请参阅 https‍://fb‍.me/react-event-pooling。

使用onchange不带去抖动器的效果很好。

0 投票
2 回答
739 浏览

go - 我如何等待频道活动的间歇触发某些事情?

我有一个通道会收到大量的写入。我想等到通道上的一系列发送完成后再触发操作。

我看过这个gistinterval ,但是,如果缓冲区中有数据,它将在输出上发送:

就我而言,我想等到输入通道上不再有任何数据发送到此突发,然后再触发或发送到输出。

我如何实现这一目标?

0 投票
12 回答
93288 浏览

reactjs - Lodash 使用 React 输入去抖动

我正在尝试将使用 lodash 的去抖动添加到从输入 onChange 事件调用的搜索函数中。下面的代码生成一个类型错误'函数是预期的',我理解这是因为 lodash 需要一个函数。这样做的正确方法是什么,可以全部内联吗?到目前为止,我已经尝试了几乎所有关于 SO 的示例,但均无济于事。