使用可变等待时间在 Vue 中去抖动输入

Question

我想在 Vue 中对输入字段进行去抖动，这非常简单，但我想让每个字段的去抖动等待时间可配置，这显然不是那么简单。

我的输入字段由对象支持，如下所示：

filters: [
    {
    title: 'Foo',
    value: null,
    debounce: 1200
  },
    {
    title: 'Bar',
    value: null,
    debounce: 400
  }
]

然后我使用这些对象创建输入字段：

  <div v-for="filter in filters">
    <input type="text" @input="debounceInput($event, filter)" :value="filter.value">
    <span>{{ filter.value }}</span>
  </div>

我正在使用这样的 Lodash debounce 方法，效果很好：

  methods: {
    debounceInput: _.debounce((event, filter) => {
        filter.value = event.target.value;
    }, 500)
  }

但我真的很想使去抖动等待时间可配置。它存储在 filter 中，但由于 filter 作为参数传递给 _.debounce，我无法在 _.debounce 之外访问它，这是我实际需要做的。

我试过在 debounce 调用周围包装一个匿名函数（这对我来说似乎是最明显的解决方案），如下所示：

debounceInputVariable(event, filter) {
    return _.debounce((event, filter) => {
      filter.value = event.target.value;
    }, filter.debounce)
}

但这不起作用。我也尝试过 bind 和 call 无济于事。

JSFiddle：https://jsfiddle.net/thebluenile/ma6nvqzh/

这可能吗？

Answer 1

创建一个方法来为每个过滤器生成去抖函数：

generateDebouncers() {
  this.filters.forEach(filter => {
    Vue.set(filter, 'debouncer', _.debounce(function(event) {
      filter.value = event.target.value;
    }, filter.debounce));
  });
}

这会在每个过滤器上创建一个 debouncer 属性，一个要在模板中调用的函数，如下所示：

<input type="text" @input="filter.debouncer" :value="filter.value">

您可以在 created 中初始化它，或者在 filters 的深度监视中调用它，如果您需要它对过滤器持续时间的变化做出反应。

这是一个demo

使用可变等待时间在 Vue 中去抖动输入

Debouncing input in Vue with variable wait time

javascript

vue.js

vuejs2

vue-component

debounce