JavaScript使用debounce优化autocomplete时350ms防抖失效如何解决？

失效根因 #

当前代码存在两处核心问题导致防抖未生效：

• 每次触发按键事件时仅新建定时器，没有清除上一次触发时创建的未执行定时器，所有按键对应的定时器都会在350ms后依次触发，因此会连续打印每一次输入的字符
• 若使用keydown事件，触发时输入框的value还未更新为按下按键后的最新值，可能出现打印结果缺少最后一个输入字符的问题

修复代码 #

方案1：使用input事件（推荐，覆盖所有输入场景，含粘贴、剪切等非按键操作） #

$(document).ready(function() {
  let debounceTimer = null;
  $('.searchBox').on('input', function() {
    // 清除上一次未执行的定时器，重置计时
    if (debounceTimer) clearTimeout(debounceTimer);
    // 新建定时器，仅350ms无输入后才执行查询
    debounceTimer = setTimeout(() => {
      getAutocomplete();
    }, 350);
  });
});

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

方案2：保留原按键过滤逻辑 #

如果需要保留过滤方向键、回车的原有逻辑，调整如下：

$(document).ready(function() {
  let debounceTimer = null;
  $('.searchBox').on('keydown', function(e) {
    var code = (e.keyCode || e.which);
    // 方向键、回车不触发查询逻辑
    if ([13,37,38,39,40].includes(code)) return;
    
    if (debounceTimer) clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      getAutocomplete();
    }, 350);
  });
});

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

内容的提问来源于stack exchange，提问作者Steve Alereza