在 jquery 中搜索 typehead 触发时间

问题描述

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

目前我已经尝试过<ItemGroup> <packagereference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="5.0.7" /> <packagereference Include="Microsoft.EntityFrameworkCore" Version="5.0.7" /> <packagereference Include="Microsoft.EntityFrameworkCore.sqlServer" Version="5.0.6" /> <packagereference Include="Microsoft.EntityFrameworkCore.Tools" Version="5.0.6"> <PrivateAssets>all</PrivateAssets> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> </packagereference> <packagereference Include="Microsoft.EntityFrameworkCore.Design" Version="5.0.7" /> <packagereference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="5.0.2" /> </ItemGroup> ，但每次输入都会在设置时间后得到多个结果。

keyup

脚本

settimeout

解决方法

听起来您真正想要的是消除用户输入的抖动，以防止每次击键时都调用 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);
},