Vuejs节流搜索输入

Question

我正在尝试实现一个搜索，并有一个输入，即用户输入搜索词，并且每 1.5 秒我希望它到达端点以获取搜索结果。现在我有这样的输入

<input v-model="term" type="text" class="form-control" placeholder="Search"
           v-on:input="search($event.target.value)" @focusin="enableSearch" @focusout="clear">

我有一个使用 lodashthrottle 方法来调用端点的函数。

search: _.throttle(function (term) {
        if (this.term != null && this.term.length > 3) {
            this.toggleSearch();
            this.searchQueue(term)
        }
    }, 1500),

现在，当我输入“Joe D”之类的搜索词而不是对端点进行一次呼叫时，我得到 4。看起来每次按键都会收到一次端点呼叫。

不知道为什么节流不起作用。任何帮助将不胜感激。

Answer 1

您可能需要 debounce 而不是 throttle。

Throttle 更多的是关于在每个时间范围内间隔事件，而去抖动是将多个事件合并为一个。

这是一个很好的演示，它说明了差异，您可以在这里阅读更多内容。