Question

我正在尝试按照Vue.js docs使用debounce过滤器，因此我可以在用户输入输入时阻止触发Ajax函数。在过去，我使用setTimeout手动阻止在输入每个字母后发送请求并使用重置延迟，但我想以Vue.js的方式进行。

以下是我的尝试：

<input
v-model="myInput"
v-on="keyup: someAjaxFunction | debounce 500"
>

专门针对此过滤器的文档中未给出任何示例。我甚至把过滤器放在正确的位置吗？

去抖

此过滤器仅适用于v-on

此过滤器采用一个可选参数

将处理程序包装为去抖动X毫秒，其中X   是争论。默认值为300毫秒。辩论的处理程序将被延迟   直到呼叫时刻后至少超过X毫秒;如果处理程序   在延迟期之前再次调用，延迟poriod被重置为   X ms。

我也试过这个:(因为文档提到“包裹处理程序......”）

<input
v-model="myInput"
v-on="keyup: debounce( someAjaxFunction, 500 )"
>

我真的可以用一个例子。

Answer 1

你的第一个例子是正确的：

<input v-model="myInput" v-on="keyup: someAjaxFunction | debounce 500">

使用Vue.js 1.0.0-beta.x，新语法为：

<input v-model="myInput" on-keyup="someAjaxFunction | debounce 500">

Answer 2

debounce过滤器已removed。

使用lodash’s debounce（或可能限制）直接限制调用昂贵的方法。您可以达到预期的结果：

<input v-on:keyup="doStuff">

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
}

来自documentation。

Answer 3

另一种方法是对 v模型进行去抖动，而不是调用方法。

您还可以只创建自己的去抖动功能，而无需任何依赖项：

可重复使用的反跳功能

export function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

在Vue组件中

data: () => ({
  textModel: 'something'
}),
watch {
  textModel: debounce(function(newVal) {
    this.searchTextDebounced = newVal;
  }, 500),
}

Answer 4

使用Quasar（基于Vue.JS）的用户可以使用Quasar自己的去抖动实现（也许Quasar暴露了Lodash的去抖动，我不知道）。

打开debouce section in Q docs

如何使用Vue.js去抖滤镜？

4 个答案: