如何使用 Vue.js 去抖过滤器？

Question

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

这是我尝试过的：

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

文档中没有专门针对此过滤器的示例。我什至把过滤器放在正确的地方了吗？

debounce

this filter only works with v-on

this filter takes one optional argument

Wrap the handler to debounce it for X milliseconds, where X is the argument. Default is 300ms. A debounced handler will be delayed until at least X ms has passed after the call moment; if the handler is called again before the delay period, the delay poriod is reset to X ms.

我也试过这个：（因为文档提到 "Wrap the handler..." ）

<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

去抖过滤器已 removed。

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

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

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

来自 documentation.

Answer 3

另一种方法是去抖 v-model，而不是调用方法。

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

可重复使用的去抖功能

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自己实现的debounce（也许Quasar暴露了Lodash的debounce，我不知道）。

打开debouce section in Q docs

如何使用 Vue.js 去抖过滤器？

How do I use Vue.js debounce filter?

javascript

vue.js