你应该去抖文本输入多长时间
How long should you debounce text input
假设我们有一个简单的例子，如下所示。
<input id="filter" type="text" />
<script>
function reload() {
// get data via ajax
}
$('#filter').change($.debounce(250,reload));
</script>
我们正在做的是引入一个小的延迟，这样我们就可以减少在用户输入文本时调用 reload 的次数。
现在，我意识到这将视具体情况而定，但是对于给定平均值（或者可能应该是最低公分母）的去抖动延迟应该有多长，是否存在公认的智慧typing/interaction 速度。我通常只是玩弄这个值直到它 "feels" 正确，但我可能不代表典型的用户。有人做过这方面的研究吗？
正如您所暗示的，答案取决于许多因素 - 并非所有因素都是主观的。
一般来说，使用去抖动操作的原因可以概括为两个目的之一：
- 降低提供动态交互元素的成本（其中成本可以是计算、IO、网络或延迟，并且可能由客户端或服务器决定）。
- 减少视觉效果 "noise" 以避免用户在忙碌时因页面更新而分心。
反应时间
要记住的一个重要数字是 250 毫秒 - 这代表了人类的（大致）中值反应时间，通常是一个很好的上限，您应该在该上限内完成任何用户界面更新以保持您的网站响应迅速。您可以查看更多关于人类反应时间的信息 here.
在前一种情况下，确切的去抖动间隔将取决于操作对双方（客户端和服务器）的成本。如果您的 AJAX 调用的端到端响应时间为 100 毫秒，那么将去抖动设置为 150 毫秒以保持在 250 毫秒的响应阈值内可能是有意义的。
另一方面，如果您的调用通常需要 4000 毫秒才能到达 运行，您最好在实际调用中设置更长的去抖，而不是使用第一层去抖来显示加载指示器（假设您的加载指示器不会遮挡您的文本输入）。
$('#filter').change($.debounce(250, show_loading));
$('#filter').change($.debounce(2000, reload));
后端容量
记住后端这些请求的性能成本也很重要。在这种情况下，结合 average typing speed（每分钟约 44 个字，或每分钟大约 200 个字符）以及对用户群规模和后端容量的了解，可以使您 select 一个去抖动值，它保持后端负载可管理。
例如：如果您有一个后端能够每秒处理 10 个请求，峰值活跃用户群为 30（使用此服务），您应该 select 您的去抖周期，以避免超过 10每秒请求数（理想情况下有误差）。在这种情况下，我们有 33.3% 的容量需要每秒处理每个用户一个输入，因此理想情况下我们每 3 秒最多为每个用户提供一个请求，从而给我们 3000ms 去抖动期。
前端性能
要记住的最后一个方面是客户端的处理成本。根据您移动的数据量和 UI 更新的复杂性，这可能可以忽略不计或很重要。您想要尝试并确保的一件事是您的用户界面保持对用户输入的响应。这并不一定意味着它总是需要能够做出反应，但是当用户与它交互时，它应该对他们做出快速反应（60FPS 通常是 objective 这里）。
在这种情况下，您的 objective 应该以防止用户界面在用户与之交互时变得迟钝或无响应的速率去抖动。同样，统计数据是得出该数字的好方法，但请记住，不同类型的输入需要不同的时间来完成。
例如，转录一个短词的句子通常比输入一个长而复杂的词要快得多。同样，如果用户必须考虑他们输入的内容，他们往往会打得更慢。这同样适用于特殊字符或标点符号的使用。
主观答案
在实践中，我使用的去抖周期范围从 100ms 用于检索速度特别快且对性能影响很小的数据到 5000ms 用于成本更高的数据.
在后一种情况下，为用户提供反馈的较短、低成本的去抖周期与用于实际计算工作的较长周期相结合，往往会在用户体验和浪费操作的性能成本之间取得良好的平衡。
在 select 使用这些值时，我要牢记的一件值得注意的事情是，作为每天使用键盘工作的人，我的打字速度可能比我的大多数用户群都快。这可能意味着对我来说顺畅和自然的事情对于打字速度较慢的人来说是不和谐的，因此最好进行一些用户测试或（更好的是）收集指标并使用它们来调整您的界面。
假设我们有一个简单的例子，如下所示。
<input id="filter" type="text" />
<script>
function reload() {
// get data via ajax
}
$('#filter').change($.debounce(250,reload));
</script>
我们正在做的是引入一个小的延迟，这样我们就可以减少在用户输入文本时调用 reload 的次数。
现在，我意识到这将视具体情况而定，但是对于给定平均值（或者可能应该是最低公分母）的去抖动延迟应该有多长，是否存在公认的智慧typing/interaction 速度。我通常只是玩弄这个值直到它 "feels" 正确，但我可能不代表典型的用户。有人做过这方面的研究吗？
正如您所暗示的，答案取决于许多因素 - 并非所有因素都是主观的。
一般来说，使用去抖动操作的原因可以概括为两个目的之一：
- 降低提供动态交互元素的成本（其中成本可以是计算、IO、网络或延迟，并且可能由客户端或服务器决定）。
- 减少视觉效果 "noise" 以避免用户在忙碌时因页面更新而分心。
反应时间
要记住的一个重要数字是 250 毫秒 - 这代表了人类的（大致）中值反应时间，通常是一个很好的上限，您应该在该上限内完成任何用户界面更新以保持您的网站响应迅速。您可以查看更多关于人类反应时间的信息 here.
在前一种情况下，确切的去抖动间隔将取决于操作对双方（客户端和服务器）的成本。如果您的 AJAX 调用的端到端响应时间为 100 毫秒，那么将去抖动设置为 150 毫秒以保持在 250 毫秒的响应阈值内可能是有意义的。
另一方面，如果您的调用通常需要 4000 毫秒才能到达 运行，您最好在实际调用中设置更长的去抖，而不是使用第一层去抖来显示加载指示器（假设您的加载指示器不会遮挡您的文本输入）。
$('#filter').change($.debounce(250, show_loading));
$('#filter').change($.debounce(2000, reload));
后端容量
记住后端这些请求的性能成本也很重要。在这种情况下，结合 average typing speed（每分钟约 44 个字，或每分钟大约 200 个字符）以及对用户群规模和后端容量的了解，可以使您 select 一个去抖动值，它保持后端负载可管理。
例如：如果您有一个后端能够每秒处理 10 个请求，峰值活跃用户群为 30（使用此服务），您应该 select 您的去抖周期，以避免超过 10每秒请求数（理想情况下有误差）。在这种情况下，我们有 33.3% 的容量需要每秒处理每个用户一个输入，因此理想情况下我们每 3 秒最多为每个用户提供一个请求，从而给我们 3000ms 去抖动期。
前端性能
要记住的最后一个方面是客户端的处理成本。根据您移动的数据量和 UI 更新的复杂性，这可能可以忽略不计或很重要。您想要尝试并确保的一件事是您的用户界面保持对用户输入的响应。这并不一定意味着它总是需要能够做出反应，但是当用户与它交互时，它应该对他们做出快速反应（60FPS 通常是 objective 这里）。
在这种情况下，您的 objective 应该以防止用户界面在用户与之交互时变得迟钝或无响应的速率去抖动。同样，统计数据是得出该数字的好方法，但请记住，不同类型的输入需要不同的时间来完成。
例如，转录一个短词的句子通常比输入一个长而复杂的词要快得多。同样，如果用户必须考虑他们输入的内容，他们往往会打得更慢。这同样适用于特殊字符或标点符号的使用。
主观答案
在实践中，我使用的去抖周期范围从 100ms 用于检索速度特别快且对性能影响很小的数据到 5000ms 用于成本更高的数据.
在后一种情况下，为用户提供反馈的较短、低成本的去抖周期与用于实际计算工作的较长周期相结合，往往会在用户体验和浪费操作的性能成本之间取得良好的平衡。
在 select 使用这些值时，我要牢记的一件值得注意的事情是，作为每天使用键盘工作的人，我的打字速度可能比我的大多数用户群都快。这可能意味着对我来说顺畅和自然的事情对于打字速度较慢的人来说是不和谐的，因此最好进行一些用户测试或（更好的是）收集指标并使用它们来调整您的界面。