Javascript 避免在每次键入字母时更新Vue.js搜索

我已经在我的webapp中使用

vue.js

2.0构建了一个搜索组件。我现在遇到的问题是，它搜索每种类型的事件。假设我想搜索

samsung

。它向我的服务器发出7个请求（7个字母）

我的输入字段如下所示：

<input
        class="input pr-4 pl-10 block"
        type="text"
        placeholder="Search for anything..."
        v-model="search"
        @keydown.enter="isOpen = false"
        @keydown.esc="isOpen = false"
        @input="onChange"/>

---

我如何确保它只在键入一个单词时进行搜索（因此它向我的服务器发出一个请求）

您通常会通过延迟或所谓的去盎司来解决此类问题。通过对一个函数进行去Bouncing，您基本上会说“在这么多毫秒之后执行这个函数，除非再次调用该去Bouncing函数”。如果用户键入的速度足够快，则会将一些请求保存到服务器。延迟应该足够小，用户不会注意到，但应该足够大，以防止对服务器不必要的垃圾邮件。在这个例子中，我使用了lodash的去盎司函数（）

如果你的搜索时间太长，去Bouncing有助于减少出血，但不能阻止出血。在单击按钮和/或按下Enter时，请考虑添加一个实际的搜索按钮并触发搜索。您还可以创建一个低成本的“建议”搜索和一个常规搜索，搜索所有内容，类似于您在维基百科（Wikipedia）上键入搜索框时看到的内容

<template>
  <input
    class="input pr-4 pl-10 block"
    type="text"
    placeholder="Search for anything..."
    v-model="search"
    @keydown.enter="isOpen = false"
    @keydown.esc="isOpen = false"
    @input="debouncedOnChange"
  />
</template>

<script>
import _debounce from 'lodash.debounce';

export default {
  name: 'search',
  data () {
    return {
      search: '',
      isOpen: false
    }
  },

  computed: {
    debouncedOnChange () {
      return _debounce(this.onChange, 700);
    }
  },

  methods: {
    onChange () {
      // do something with this.search
    }
  }
}
</script>

从“lodash.debounce”进口_debounce；
导出默认值{
名称：'搜索'，
数据（）{
返回{
搜索：“”，
伊索彭：错
}
},
计算：{
脱胶（）{
返回_debounce（此.onChange，700）；
}
},
方法：{
onChange（）{
//用这个做点什么。搜索
}
}
}

---

通常，您可以通过增加一些延迟或所谓的去抖动来解决此类问题。通过对一个函数进行去Bouncing，您基本上会说“在这么多毫秒之后执行这个函数，除非再次调用该去Bouncing函数”。如果用户键入的速度足够快，则会将一些请求保存到服务器。延迟应该足够小，用户不会注意到，但应该足够大，以防止对服务器不必要的垃圾邮件。在这个例子中，我使用了lodash的去盎司函数（）

如果你的搜索时间太长，去Bouncing有助于减少出血，但不能阻止出血。在单击按钮和/或按下Enter时，请考虑添加一个实际的搜索按钮并触发搜索。您还可以创建一个低成本的“建议”搜索和一个常规搜索，搜索所有内容，类似于您在维基百科（Wikipedia）上键入搜索框时看到的内容

<template>
  <input
    class="input pr-4 pl-10 block"
    type="text"
    placeholder="Search for anything..."
    v-model="search"
    @keydown.enter="isOpen = false"
    @keydown.esc="isOpen = false"
    @input="debouncedOnChange"
  />
</template>

<script>
import _debounce from 'lodash.debounce';

export default {
  name: 'search',
  data () {
    return {
      search: '',
      isOpen: false
    }
  },

  computed: {
    debouncedOnChange () {
      return _debounce(this.onChange, 700);
    }
  },

  methods: {
    onChange () {
      // do something with this.search
    }
  }
}
</script>

从“lodash.debounce”进口_debounce；
导出默认值{
名称：'搜索'，
数据（）{
返回{
搜索：“”，
伊索彭：错
}
},
计算：{
脱胶（）{
返回_debounce（此.onChange，700）；
}
},
方法：{
onChange（）{
//用这个做点什么。搜索
}
}
}

---

谢谢！那正是我要找的：）你为什么还回来？而不是直接调用它？在本例中，我返回它，因为

debouncedOnChange

是一个计算属性。如果我不归还它，什么也不会发生。我为我的正常函数计算一个去盎司函数，然后丢弃它。它将返回

undefined

，这对

@input

事件没有任何用处。我们在这里使用计算属性，因为我们想计算一次去盎司函数。如果我们要为每个输入事件创建一个新的去Bounce函数，它将类似于

window.setTimeout（this.onChange，700）

，它将为每个输入事件执行一次函数，而不是分组。谢谢！那正是我要找的：）你为什么还回来？而不是直接调用它？在本例中，我返回它，因为

debouncedOnChange

是一个计算属性。如果我不归还它，什么也不会发生。我为我的正常函数计算一个去盎司函数，然后丢弃它。它将返回

undefined

，这对

@input

事件没有任何用处。我们在这里使用计算属性，因为我们想计算一次去盎司函数。如果我们要为每个输入事件创建一个新的debounce函数，它将类似于

window.setTimeout（this.onChange，700）

，它将为每个输入事件执行一次函数，而不是分组。