jQuery实现搜索输入停止打字3秒后触发typehead事件的方法

问题原因 #

你当前的写法每次触发keyup事件都会生成独立的定时器，所有定时器到期后都会执行请求，因此会返回多个结果，属于未做防抖处理的典型表现。

实现方案 #

现有输入框代码无需修改，只需调整JS逻辑部分即可，推荐两种实现方式：

方案1：原生JS手动实现（无额外依赖） #

首先在Vue的data中新增变量存储定时器ID：

data() {
  return {
    // 其他已有数据保持不变
    searchTimer: null,
    formFields: {
      fullname: ''
      // 其他原有表单字段
    }
  }
}

修改typehead方法逻辑：

typehead(){
  const vm = this;
  const driveInfo = vm.formFields.fullname;

  // 每次触发输入先清空上一次未执行的定时器
  if (vm.searchTimer) {
    clearTimeout(vm.searchTimer);
  }

  // 重新创建3秒倒计时的定时器
  vm.searchTimer = setTimeout(() => {
    axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => {
      console.log(response.data);
      // 后续业务处理逻辑
    });
  }, 3000); // 3000对应3秒，可根据需求自行调整时长
},

方案2：使用Lodash的debounce方法（更简洁） #

如果项目中已引入Lodash工具库，可以直接使用封装好的防抖能力：
首先引入debounce方法：

import { debounce } from 'lodash';

直接定义防抖方法：

methods: {
  typehead: debounce(function() {
    const driveInfo = this.formFields.fullname;
    axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => {
      console.log(response.data);
    });
  }, 3000) // 3秒延迟
}

实现原理 #

每次输入触发keyup事件时，都会清空上一次未执行的定时器重新计时，只有当连续3秒没有新的输入时，定时器才会正常触发请求，完全符合「持续输入不触发、停止输入3秒后才触发」的需求。

优化建议 #

• 可在组件销毁生命周期中清除剩余定时器，避免内存泄漏：

// Vue2 示例
beforeDestroy() {
  if (this.searchTimer) {
    clearTimeout(this.searchTimer);
  }
}

// Vue3 示例
onUnmounted(() => {
  if (searchTimer.value) {
    clearTimeout(searchTimer.value);
  }
})

• 如果接口响应速度慢，可以搭配axios取消请求逻辑，避免旧请求返回覆盖新结果的问题。

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