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

Question

我正在尝试debounce按照Vue.js文档使用过滤器,因此我可以防止在用户输入输入时触发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

debounce filter已被删除.

使用lodash的去抖(或可能是节流)来直接限制调用昂贵的方法.你可以像这样达到预期的结果:

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

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

从文档.

Answer 2

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

<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 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),
}