在 jquery 中搜索预输入触发时间

Question

有什么方法可以在 laravel vuejs 中每 3 秒触发一次事件，但是我在 script.The 中一直使用 Jquery 问题是当我搜索和输入任何字符串，因为我一直在输入类型上使用 keyup 它会触发我输入的每个字符的事件。我想要的是，当你停止输入至少 3 秒时它会触发，否则如果你继续输入它不会触发事件，有什么办法可以实现吗？对我很有帮助。

目前我已经尝试过settimeout但是每次输入都会在设置时间后得到多个结果。

<input type="text" class="form-control required-field" name="driver_fullname" placeholder="Enter fullname" v-model="formFields.fullname" v-on:keyup="typehead"/>

脚本

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

         setTimeout(() => {
            axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => {
            console.log(response.data);
            });
        }, 500);
    },

Answer 1

听起来您真正想要的是消除用户输入的抖动，以防止在每次击键时调用 API。

查看 https://www.npmjs.com/package/debounce

如果你真的想在用户停止输入后延迟三秒，一种方法是使用 clearTimeout().

将 typeaheadTimeout: null 添加到您的组件 data。

然后：

typehead() {
  let driveInfo = this.formFields.fullname;

  if (this.typeaheadTimeout) {
    clearTimeout(this.typeaheadTimeout);
  }

  this.typeaheadTimeout = setTimeout(() => {
    axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => {
      console.log(response.data);
    });
  }, 3000);
},

在 jquery 中搜索预输入触发时间

Search typehead trigger time in jquery

javascript

laravel

vue.js

search

typehead