正如您所提到的,答案取决于许多因素-并非所有因素都是主观的。
一般而言,使用防抖操作的原因可以归纳为以下两个目的之一:
- 降低提供动态交互元素的成本(成本可能是计算、IO、网络或延迟,可能由客户端或服务器指定)。
- 减少视觉“噪音”,避免在用户繁忙时通过页面更新分散他们的注意力。
反应时间
要记住的一个重要数字是250ms-这代表人类的(大约)中位数反应时间,并且通常是你应该在其中完成任何用户界面更新的上限,以使您的网站感觉响应灵敏。您可以在此处查看有关人类反应时间的更多信息。
在前一种情况下,确切的防抖间隔将取决于双方(客户端和服务器)操作的成本。如果您的AJAX调用具有100ms的端到端响应时间,则设置防抖为150ms以保持在250ms的响应性阈值内可能是明智的。
另一方面,如果您的调用通常需要4000ms才能运行,则最好在实际调用上设置更长的防抖,并使用第一层防抖来显示加载指示器(假设您的加载指示器不会遮挡您的文本输入)。
$('#filter').change($.debounce(250, show_loading));
$('#filter').change($.debounce(2000, reload));
后端容量
还要记住这些请求对后端的性能成本很重要。在这种情况下,结合平均打字速度(大约为每分钟44个单词,或大约每分钟200个字符)和了解您的用户基础大小和后端容量,可以选择防抖值以使后端负载可管理。
例如:如果您有一个后端能够处理每秒10个请求且峰值活跃用户量为30(使用此服务),则应选择反弹周期,以避免超过每秒10个请求(最好有误差范围)。在这种情况下,我们需要的处理输入的能力是每个用户每秒一个,因此我们最好每3秒为一个用户提供最多一次请求,从而得到我们的3000ms反弹周期。
前端性能
另一个需要记住的方面是客户端处理成本。根据您所移动的数据量和UI更新的复杂性,这可能是微不足道的或显着的。你想确保的一件事是你的用户界面对用户输入保持响应。这并不意味着它总是需要能够反应,但是当用户与它交互时,它应该迅速地对他们作出反应(通常的目标是60FPS)。
在这种情况下,你的目标应该是以一个防抖率,防止用户界面变得迟缓或无响应,同时用户正在与之交互。同样,统计数据是推导这个数字的好方法,但要记住,不同类型的输入需要不同的完成时间。
例如,转录一句短单词通常比输入单个长而复杂的单词快得多。同样,如果用户需要考虑输入的内容,他们往往会打得更慢。对于使用特殊字符或标点符号也是一样。
主观答案
实际上,我使用的反弹周期范围从100ms(用于非常快速检索数据且对性能几乎没有影响)到5000ms(用于更昂贵的事情)。 在后一种情况下,将短、低成本的反弹周期与长周期配对,以向用户提供反馈和实际计算工作之间取得良好平衡,这往往是不错的选择。
在选择这些值时,我需要记住一件重要的事情,那就是作为一个每天都使用键盘工作的人,我的打字速度可能比大部分用户更快。这意味着对于打字速度较慢的用户来说,对我而言感觉流畅和自然的东西可能会令他们感到不适,因此最好进行一些用户测试或(更好的方法)收集指标并使用它们来调整您的界面。
275ms
。在我的情况下,这个数字是防抖的关键。 - Ivijan Stefan Stipić