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">

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

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 更多的是关于在每个时间范围内分隔事件，而 debounce 是将多个事件合并为一个。

这是一个很好的demo，它说明了不同之处，您可以阅读更多here。