Vue.js中如何延迟@keyup处理器？实现输入停止800ms后仅调用一次getUsers

你遇到的是防抖逻辑里的经典作用域问题——当前代码里的定时器变量无法跨函数调用共享，导致每次输入字符都会触发独立的定时器，最终多次调用getUsers()。咱们调整一下变量的作用域就能搞定：

问题根源 #

你把timeout声明在searchTimeOut()函数内部，这意味着每次触发keyup事件时，都会创建一个全新的timeout变量。之前设置的定时器根本没被clearTimeout清除，所以每个字符输入后800ms，对应的定时器都会执行一次API调用。

修复方案 #

把timeout变量放到Vue组件的data中，让它成为实例的共享属性，这样每次调用searchTimeOut()时都能访问到同一个定时器引用：

第一步：更新Vue组件代码 #

export default {
  data() {
    return {
      filterName: '',
      timeout: null // 将timeout提升到data，作为实例级变量
    }
  },
  methods: {
    getUsers() {
      // 你的API调用逻辑
      API.users.index(params).then(blabla);
    },
    searchTimeOut() {
      // 清除上一次未执行的定时器
      clearTimeout(this.timeout);
      // 重新设置800ms后的触发定时器
      this.timeout = setTimeout(() => {
        this.getUsers();
        console.log("hi")
      }, 800);
    }
  }
}

视图代码保持不变 #

<ns-input#filterName(type="text", v-model="filterName", @keyup="searchTimeOut()")></ns-input>

额外优化建议 #

• 推荐监听input事件替代keyup，这样能覆盖更多输入场景（比如鼠标粘贴、输入法选词完成）：

  <ns-input#filterName(type="text", v-model="filterName", @input="searchTimeOut()")></ns-input>
  

• 如果你用的是Vue 3组合式API，可以用ref声明定时器变量：

  import { ref } from 'vue';
  
  export default {
    setup() {
      const filterName = ref('');
      const timeout = ref(null);
  
      const getUsers = () => {
        API.users.index(params).then(blabla);
      };
  
      const searchTimeOut = () => {
        clearTimeout(timeout.value);
        timeout.value = setTimeout(() => {
          getUsers();
          console.log("hi");
        }, 800);
      };
  
      return { filterName, searchTimeOut };
    }
  }
  

调整后，每次输入字符都会清除之前的定时器，只有当你停止输入满800ms后，才会触发一次getUsers()调用。

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