JavaScript - 通过去抖动和节流优化自动完成答案

【问题标题】：JavaScript - Optimizing autocomplete with debounce and throttlingJavaScript - 通过去抖动和节流优化自动完成
【发布时间】：2021-08-04 21:44:31
【问题描述】：

我有以下文本框和“自动完成”功能。在文本框中输入每个字符后，它应该有 350 毫秒的去抖，但它不起作用。

在 JSFiddle 中亲自尝试一下。正如您在控制台中看到的那样，控制台正在记录输入的每个字符，而无需等待去抖动时间。

我应该怎么做才能使这个功能按预期工作？我希望有 350 毫秒的去抖动时间，以防止记录每个字符...只需每 350 毫秒更新一次输出。

这里是 JSFiddle：https://jsfiddle.net/8pdb97wj/1/

$(document).ready(function() {
  let debounce;
  $('.searchBox').on('keydown', function(e) {
    // get keycode of current keypress event
    var code = (e.keyCode || e.which);

    // do nothing if it's an arrow key or enter
    if (code == 37 || code == 38 || code == 39 || code == 40 || code == 13) {
      return;
    }

    // do normal behavior for any other key
    debounce = setTimeout(() => {
      getAutocomplete();
    }, 350);
  });
});

function getAutocomplete() {
  console.log($('.searchBox').val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="searchBox"></input>

【问题讨论】：

您似乎忘记清除超时。如果不清除，您所做的只是将结果延迟 350 毫秒，而不是减少结果发生的次数。
去抖动不起作用，这是我正在尝试解决的问题。控制台在应该每 350 毫秒跳过和记录文本框的输入时记录每个字符，而不是每个字符
凯文，你如何清除超时？这正是我需要解决的问题，谢谢！
在超时前添加clearTimeout(debounce)
请注意，这是去抖动，而不是油门。结果将是它不会执行操作，直到 350 毫秒内没有事件发生。如果你想要一个油门，逻辑有点不同。

标签： javascript html jquery throttling debounce

【解决方案1】：

在设置另一个超时之前清除现有超时。

$(document).ready(function() {
  let debounce;
  $('.searchBox').on('keydown', function(e) {
    // get keycode of current keypress event
    var code = (e.keyCode || e.which);

    // do nothing if it's an arrow key or enter
    if (code == 37 || code == 38 || code == 39 || code == 40 || code == 13) {
      return;
    }

    // do normal behavior for any other key
    clearTimeout(debounce);
    debounce = setTimeout(() => {
      getAutocomplete();
    }, 350);
  });
});

function getAutocomplete() {
  console.log($('.searchBox').val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="searchBox">

【讨论】：