在 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 中，但由于过滤器作为参数传递给_.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