javascript - 你应该多长时间去抖动文本输入

Question

假设我们有一个简单的例子，如下所示。

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

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

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

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

现在，我意识到这将取决于具体情况，但是考虑到平均(或者可能应该是最低公分母)打字/交互速度，是否存在关于去抖动延迟应该多长时间的公认智慧。我通常只是玩弄这个值(value)，直到它“感觉”正确，但我可能不代表一个典型的用户。有没有人做过这方面的研究？

Answer 1

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

一般来说，使用去抖动操作的原因可以概括为以下两个目的之一:

降低提供动态交互元素的成本(其中成本可以是计算、IO、网络或延迟，可能由客户端或服务器决定)。

减少视觉“噪音”以避免在用户忙碌时因页面更新而分散他们的注意力。

react 时间

要记住的一个重要数字是 250 毫秒 - 这代表了人类(大致) react 时间的中值，通常是一个很好的上限，您应该在此上限内完成任何用户界面更新以保持您的网站响应速度。您可以查看有关人类 react 时间的更多信息 here .

在前一种情况下，确切的去抖动间隔将取决于双方(客户端和服务器)的操作成本。如果您的 AJAX 调用的端到端响应时间为 100 毫秒，那么将去抖动设置为 150 毫秒以保持在 250 毫秒响应阈值内可能是有意义的。

另一方面，如果您的调用通常需要 4000 毫秒来运行，那么您最好在实际调用中设置更长的去抖动，而是使用第一层去抖动来显示加载指示器(假设您的加载指示器没有遮挡)您的文本输入)。
$('#filter').change($.debounce(250, show_loading)); $('#filter').change($.debounce(2000, reload));
后端容量

记住这些请求在后端的性能成本也很重要。在这种情况下，组合 average typing speed (每分钟大约 44 个单词，或大约每分钟 200 个字符)以及了解您的用户群大小和后端容量可以让您选择一个去抖动值，使后端负载易于管理。

例如:如果您有一个能够每秒处理 10 个请求且峰值活跃用户群为 30 个(使用此服务)的单个后端，则您应该选择去抖动时间，以避免超过每秒 10 个请求(理想情况下有错误)。在这种情况下，我们有 33.3% 的容量来处理每个用户每秒的一个输入，所以我们理想情况下每 3 秒最多为每个用户提供一个请求，给我们 3000ms去抖动期。

前端性能

要记住的最后一个方面是客户端的处理成本。根据您移动的数据量和 UI 更新的复杂性，这可能可以忽略不计或重要。您想要尝试并确保的一件事是您的用户界面保持对用户输入的响应。这并不一定意味着它总是需要能够使用react，但是当用户与它交互时，它应该对他们做出快速 react (60FPS 通常是这里的目标)。

在这种情况下，您的目标应该是以防止用户界面在用户与其交互时变得迟钝或无响应的速度去抖动。同样，统计数据是得出这个数字的好方法，但请记住，不同类型的输入需要不同的时间来完成。

例如，转录一个短词的句子通常比输入一个长而复杂的词要快得多。同样，如果用户必须考虑他们正在输入的内容，他们的输入速度往往会变慢。这同样适用于特殊字符或标点符号的使用。

主观回答

在实践中，我使用了范围从 100ms 的去抖动周期。对于检索速度非常快且对性能影响很小的数据，直到 5000ms对于更昂贵的东西。

在后一种情况下，将较短的、低成本的去抖动周期与向用户呈现反馈的较长周期相结合，往往会在用户体验和浪费操作的性能成本之间取得良好的平衡。

在选择这些值时，我要记住的一件值得注意的事情是，作为每天使用键盘工作的人，我打字的速度可能比我的大多数用户群都要快。这可能意味着对我来说感觉流畅和自然的事情对于打字速度较慢的人来说是刺耳的，因此最好进行一些用户测试或(更好)收集指标并使用这些指标来调整您的界面。