防抖和节流是什么，在vue中如何实现

一、防抖和节流是什么

相同点：
都是为了减轻服务器压力的一种策略

不同点：
防抖是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
节流是指不论触发多少次事件，在n秒内只执行1次。

二、防抖和节流的实现

debounce为防抖函数
throttle为节流函数

  <div id="app">
    <input type="text" @input="debounce">
    <input type="text" @input="throttle">
  </div>

    let vm = new Vue({
      el: '#app',
      data: {
        timeout: false,
        lastTime: 0,
        now: Number.MAX_VALUE
      },
      methods: {
        debounce() {
          if (this.timeout) {
            clearTimeout(this.timeout)
          }
          this.timeout = setTimeout(() => {
            console.log('发送网络请求');
            this.timeout = false
          }, 2000)
        },

        throttle() {
          if (this.now - this.lastTime >= 2000) {
            this.lastTime = +new Date()
            this.now = +new Date()
            setTimeout(() => {
              console.log('发送网络请求');
              this.now = +new Date()
            }, 2000)
          }
        }
      }
    })