使用vue实现防抖

场景：当需要用输入框的输入的值进行实时验证或搜索时

// debounce.js
export const debounce = (() => {
    let timer = null
    return (callback, wait) => {
     clearTimeout(timer)
     timer = setTimeout(callback, wait)
    }
})()
// test.vue
<template>
  <div class="movie-search-box">
    <label for="movieName">请输入电影名字</label>
    <input id="movieName" type="text" @keyup="getMovieName">
  </div>
</template>
<script>
import { debounce } from "./debounce"
export default {
  name: 'test',
  data () {
    return {}
  },
  methods: {
    getMovieName (e) {
      debounce(() => { 
        console.log(e.target.value)
      }, 1000)
    }

  }
}
</script>

注：函数防抖也是闭包的一个使用场景；同vue组件中的data需要在return中设置变量一样——防止全局变量的污染；当该页面有多个函数同时调用防抖时，如果不使用闭包单独生成一个的空间，将会相互影响。