如何为onInput函数实现防抖，避免每次按键触发逻辑

一、适配防抖函数到输入事件 #

你手上的防抖函数是通用型的，要适配到oninput事件且实现按键后延迟250ms执行、不立即触发，只需要两步操作：

1. 创建防抖包装后的getValue函数，将immediate参数设为false（该参数控制是否立即执行逻辑，设为false就会等待指定时长后触发）：

const debouncedGetValue = debounce(getValue, 250, false);

2. 把HTML内联的oninput="getValue()"替换为JS事件绑定（内联事件无法直接绑定防抖后的函数）：

<textarea id="myInput" placeholder="type here..."></textarea> <br>
<textarea id="myOutput"></textarea>

然后在JS代码中添加事件绑定：

document.getElementById('myInput').addEventListener('input', debouncedGetValue);

这样每次按键都会重置定时器，只有当用户停止输入250ms后，才会执行getValue逻辑，避免频繁触发正则匹配导致的延迟。

二、优化正则匹配性能（针对大对象场景） #

原代码先过滤所有匹配短语再找最长项，当myObject规模较大时会执行大量正则匹配，进一步拖慢速度。可以提前将对象按键按长度降序排序，找到第一个匹配的短语就停止遍历，直接使用对应值，减少正则执行次数：

修改后的getValue函数：

// 提前预处理：将对象按键按长度从长到短排序，避免每次执行逻辑都重复排序
const sortedKeys = Object.keys(myObject).sort((a, b) => b.length - a.length);

function getValue() {
  const userInput = document.getElementById("myInput").value.trim().toLowerCase();
  let matchedKey = null;

  // 遍历排序后的键，找到第一个匹配项（即最长匹配短语）
  for (const key of sortedKeys) {
    if (userInput.match(new RegExp("\\b" + key + "\\b"))) {
      matchedKey = key;
      break; // 找到目标后立即停止遍历，提升效率
    }
  }

  // 输出结果
  const outputEl = document.getElementById("myOutput");
  outputEl.innerHTML = matchedKey ? myObject[matchedKey] : userInput;
}

完整代码示例 #

// 防抖函数
function debounce(func, wait, immediate) {
  let timeout;
  return function () {
    const context = this,
      args = arguments,
      later = function () {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

// 翻译映射对象
const myObject = {
  "good morning": "ma be dehe",
  "good": "bao",
  "morning": "suazi",
  "go": "doi",
  "i": "mu",
  "how are you": "dai ze de",
};

// 预处理排序后的键数组
const sortedKeys = Object.keys(myObject).sort((a, b) => b.length - a.length);

// 核心翻译逻辑函数
function getValue() {
  const userInput = document.getElementById("myInput").value.trim().toLowerCase();
  let matchedKey = null;

  for (const key of sortedKeys) {
    if (userInput.match(new RegExp("\\b" + key + "\\b"))) {
      matchedKey = key;
      break;
    }
  }

  const outputEl = document.getElementById("myOutput");
  outputEl.innerHTML = matchedKey ? myObject[matchedKey] : userInput;
}

// 绑定防抖后的输入事件
const debouncedGetValue = debounce(getValue, 250, false);
document.getElementById('myInput').addEventListener('input', debouncedGetValue);

<textarea id="myInput" placeholder="type here..."></textarea> <br>
<textarea id="myOutput"></textarea>

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