如何优化JavaScript函数触发时机，仅在用户完成日期输入后执行

方案1：使用change事件（优先推荐） #

type="date"类型的input原生支持change事件，该事件仅在用户完成日期选择、确认输入或输入框失去焦点时触发，完全匹配你“用户完全完成输入后再执行”的需求，不需要额外加延时：

const keyForm = document.getElementById("key-form");
keyForm.addEventListener("change", function () {
  // 先判断是否选择了有效日期，避免空值执行
  if (!this.value) return;
  const key = this.value;
  alert(key);
  // 这里放你的目标业务代码
})

这个方案是成本最低、适配性最好的实现，完全适配浏览器原生日期选择器的交互逻辑，用户点选完日期确认的瞬间就会触发，不需要等待固定时长。

方案2：防抖实现（适用于允许手动输入日期的场景） #

如果你允许用户手动在输入框里敲日期，想要实现“用户停止输入300ms后自动执行”的效果，不需要等失焦，可以用防抖逻辑：

const keyForm = document.getElementById("key-form");
let timer = null;

keyForm.addEventListener("input", function () {
  // 每次输入触发时清除上一次的定时器
  clearTimeout(timer);
  // 300ms内没有新的输入就执行逻辑，时长可以自己调整
  timer = setTimeout(() => {
    if (!this.value) return;
    const key = this.value;
    alert(key);
    // 这里放你的目标业务代码
  }, 300);
})

如果你的场景同时支持点选日期和手动输入，也可以把两个事件结合用，change事件处理点选场景，防抖input处理手动输入场景。

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