Javascript 可变等待时间的Vue中的去抖动输入

我想在Vue中对输入字段进行去盎司处理，这非常简单，但我想对每个字段进行去盎司等待时间配置，这显然不是那么简单

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

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

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

然后，我使用以下对象创建输入字段：

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

但我真的想让去盎司等待时间可配置。它存储在

filter

中，但由于filter作为参数传递给

.debounce

，因此我无法在

.debounce

之外访问它，这正是我实际需要做的

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

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

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

但这不起作用。我还尝试了

bind

和

call

，但没有成功

JSFiddle：

---

这可能吗？

创建一种方法，为每个过滤器生成去盎司函数：

generatedbouncers（）{
this.filters.forEach（filter=>{
Vue.set（过滤器，'debouncer'，u.debounce（函数（事件））{
filter.value=event.target.value；
}，过滤。去盎司）；
});
}

这将在每个过滤器上创建一个

debouncer

属性，该函数将在模板中调用，如下所示：

您可以在

created

中初始化它，或者在

filters

上的深度监视中调用它，如果您需要它对过滤器持续时间的更改做出反应

---

不幸的是，没有。。。这只会在每个输入事件上创建一个去公告函数的新实例（并执行它），这有点违背了目的。感谢指针！在我的实际应用程序中，我为过滤器提供了一个工厂函数，并在那里添加了它。现在，每个过滤器都有一个

debounce

属性，其中包含debounce函数。