文本输入去抖动应该持续多久？

Question

文本输入去抖动应该持续多久？

80

假设我们有以下简单的示例。

<input id="filter" type="text" />
<script>

    function reload() {
     // get data via ajax
    }

    $('#filter').change($.debounce(250,reload));
</script>

我们正在做的是引入一个小的延迟，以便在用户输入文本时减少对reload的调用次数。

现在，我意识到这将取决于具体情况，但是否有一种被接受的智慧来确定防抖延迟应该是多长时间，考虑到平均（或者可能是最低公共分母）打字/互动速度。我通常会尝试不同值，直到它“感觉”正确，但我可能不代表典型用户。是否有人对此进行了研究？

- Sam Shiles

2个回答

9

我想给出一个简明的关于搜索文本输入的答案。

通常我设置为300毫秒，这样既考虑了节省硬件资源又提供了足够好的用户体验。

--

一个有趣的想法...

我们来看一个大师的例子：Google。

如果你注意到（你必须是个快速打字者），Google实际上在前几个字符（我认为是2个）中很少或没有去抖时间，但之后它增加了去抖时间。他们的主要目标显然是给人一种即时感，并平衡他们的UI和用例。我不知道他们做了什么数据或研究，但他们已经完成了它们，并且是一个当搜索输入是站点的主要功能时的良好示例。

因此，尽管需要额外的复杂性和编程时间，但我认为这是一个极好的用户体验。频率较低的搜索栏可以省略额外的复杂性，也许更好。

- karns

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Benjamin Pannell · Accepted Answer

正如您所提到的，答案取决于许多因素-并非所有因素都是主观的。

一般而言，使用防抖操作的原因可以归纳为以下两个目的之一：

降低提供动态交互元素的成本（成本可能是计算、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(用于更昂贵的事情)。在后一种情况下，将短、低成本的反弹周期与长周期配对，以向用户提供反馈和实际计算工作之间取得良好平衡，这往往是不错的选择。

在选择这些值时，我需要记住一件重要的事情，那就是作为一个每天都使用键盘工作的人，我的打字速度可能比大部分用户更快。这意味着对于打字速度较慢的用户来说，对我而言感觉流畅和自然的东西可能会令他们感到不适，因此最好进行一些用户测试或（更好的方法）收集指标并使用它们来调整您的界面。