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

Question

我有一个搜索输入。

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

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

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

这很好用。

我想仅在没有按键延迟时发出搜索事件，比如说 200 毫秒。 这样，如果我在搜索输入中快速键入一个单词，则只会发送一个事件。如果我速度慢，我仍然会在打字时看到搜索结果。

我怎样才能做到这一点？

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>