如何在 Vue.js 中延迟 @keyup 处理程序 [英] How to delay @keyup handler in Vue.js

问题描述

我的观点:

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

在我的 vue 代码中:

in my vue code:

getUsers() {
   .
   .
   .
   API.users.index(params).then(blabla);
   .
   .
   .
},

searchTimeOut() {
  let timeout = null;
  clearTimeout(timeout);
  // Make a new timeout set to go off in 800ms
  timeout = setTimeout(() => {
    this.getUsers();
    console.log("hi")
  }, 800);
},

我想在我停止打字和 800 毫秒后只调用一次 getUsers().现在，我每次写信时都会调用 getUsers().

I want call getUsers() only once after i stop typing and 800 ms. Right now, i'm calling getUsers() every time i write a letter.

推荐答案

您在清除间隔之前删除 this.timer 值.改为这样做:

You drop this.timer value before clearing the interval. Do this instead:

searchTimeOut() {  
    if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
    }
    this.timer = setTimeout(() => {
        // your code
    }, 800);
}

这篇关于如何在 Vue.js 中延迟 @keyup 处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！