Question

我有搜索输入。

此输入上的每次击键都会发出一个事件“search”（$ emit Vue.js函数）。

我有另一个组件正在侦听此事件（$ on Vue.js函数），然后调用搜索Web服务并显示结果。

（事件在总线上发送，这里是一个简单的Vue实例）。

这很有效。

我想发布搜索事件只有在没有按键延迟时才发出，比如说200ms。这样，如果我在搜索输入中输入一个单词，则只会发送一个事件。如果我很慢，我在输入时仍然会有搜索结果。

我怎样才能做到这一点？

Answer 1

我正在使用下划线的.debounce()方法来实现这些目的。演示：

new Vue({
  el: '#app',
  data: {
    query: ''
  },
  methods: {
    updateQuery: _.debounce(function (evt) {
      this.query = evt.target.value
      // Call your AJAX here. For example:
      // if (this.query.length) this.$store.dispatch('loadItems')
    }, 300),
    clearQuery () {
      this.query = ''
    }
  }
})

[v-cloak] {
  display: none;
}

<div id="app">
  <input
    type="text"
    @input="updateQuery"
    :value="query"
    placehorder="search..."
  >
  <button @click="clearQuery">clear</button>
  <p v-cloak>You are looking for {{ query }}</p>
</div>

<script src="https://unpkg.com/underscore@1.8.3/underscore-min.js"></script>
<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>

如果您想要更有效，请使用Lodash。这是一回事，但Lodash是模块化的，因此您只需要为项目添加所需的模块，而不是完整的库。对于.debounce（）方法，有单独的javascript：

<script src="https://unpkg.com/lodash@4.17.4/debounce.js"></script>

Vue.js - 仅在事件尚未发送时发出

1 个答案: