Vue 防抖

原理：

当持续触发某事件时，在一定时间间隔内执行回调函数，如果在这个时间间隔内重复执行此事件，重新开始计时。

使用场景：

多次触发事件或因为某一个事件频繁调用接口

eg：实时搜索

<template>
    <div>
        <input type="text" v-model="key" name="fname" ref="keyInput">
    </div>
</template>

<script>
import {debounce} from './until/unitl'
    data() {
        return {
          key: '',
        }
    },
    mounted() {
        let that = this
        // debounce(输出的函数方法，时间间隔)
        this.$refs.keyInput.addEventListener('input', debounce(() => {
          that.handleInput()
        }, 2000))

        // 也可以这样写
        this.$refs.keyInput.addEventListener('input', debounce(this.handleInput, 2000))
    },
    methods: {
        handleInput() {
          console.log(this.key)
        },
    }
</script>

unitl.js

function debounce(func, delay) {
  let timer = null
  return function() {
    if (timer) {
      clearTimeout(timer)
    }
    
    timer = setTimeout(() => {
      func(this, arguments)
      timer = null
    }, delay)
  }
}

export {
  debounce,
}

还可以借助 loadsh 实现防抖和节流