在做搜索功能的时候，我们不希望input框中值一改变，就马上去请求数据，而是在指定间隔内没有输入时，才会执行函数。在指定时间间隔里输入，会清除定时器，重新计时。这就是函数防抖。

因为我们可能在input框中的值还没有输完，这个时候，增加一个字符，就发送一次请求，这样太消耗程序，可能出现卡顿的情况。

因此，实时监听input值的变化，输入一个字符，200ms后再去获取input中的输入值。

例如，在input框中连续输入aaaaa，如果实时监听，值就是a, aa, aaa, aaaa, aaaaa，发送的就是五次请求。如果200ms后获取值，可能就是aaaaa。这样就只能发送一次请求。

<template>
  <div class="search-box">
    <input class="box"
           :placeholder="placeholder"
           v-model="query"
    >
  </div>
</template>
<script type="text/ecmascript-6">
  import { debounce } from 'common/js/util'

  export default {
    props: {
      placeholder: {
        type: String,
        default: '搜索歌曲、歌手'
      }
    },
    data() {
      return {
        query: ''
      }
    },
    created() {
      this.$watch('query', debounce((newQuery) => {
        this.$emit('query', newQuery)
      }, 200))
    }
  }
</script>

util.js:

export function debounce(func, delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}