js函数防抖和节流如何实现，在Vue项目中如何使用

防抖节流为前端开发中性能优化方式之一：

项目中一些操作可能会高频率的向服务器请求资源，
会造成非常大的性能浪费，甚至会导致界面卡住或者整个浏览器崩溃。
例如有：onscroll oninput resize onkeyup onkedown onkeypress mousedown等等，
为了解决这些性能问题，函数节流和防抖都是非常有必要的。

防抖节流函数的实现方式：（可将该函数写在项目中公共的js文件）

      /**
         * 这个 debounce 函数在给定的时间间隔内只允许你提供的回调函数执行一次，以此降低它的执行频率。
         * @method 防抖函数(500ms之后出结果，重复点击无效，如果重复点击，从点击的时刻,重新计算时间)
         * @params {Function} {handler} 事件处理函数
         * @params {Number} {delay} 恢复点击的毫秒数
      */

      const debounce = (handler, delay = 500) => {
         let timeout
         return function (...args) {
            // 获取函数的作用域及变量
            let that = this
            // 每次事件被触发，都会清楚当前timeout，然后重新计算时间
            timeout && clearTimeout(timeout)
            timeout = setTimeout(() => {
               handler.apply(that, args)
            }, delay);
         }
      }

      /**
         * @method 节流函数(500ms之内只能点击一次，点击后立即触发，重复点击无效，必须等到500ms执行完才执行第二次)
         * @params {Function} {handler} 事件处理函数
         * @params {Number} {delay} 恢复点击的毫秒数
      */
      const throttle = (handler, delay = 500) => {
         let last, deferTimer;
         return function (...args) {
            let that = this
            let now = +new Date()
            if (last && now < last + delay) {
               deferTimer && clearTimeout(deferTimer)
               deferTimer = setTimeout(() => {
                  last = now
               }, delay)
            } else {
               last = now
               handler.apply(that, args)
            }
         }
      }

在vue中如何使用：可创建公共的js文件，把以上防抖、节流函数放进去，在再当前vue文件中引入对应函数。

<template>
    <div>
      <button @click='test'></button>
    </div>
</template>
<script>
import { throttle } from '项目中对应的文件路径'
export default {
  data () {
    return {

    }
  },
  methods: {
    // 节流函数
    test: throttle(function () {
      console.log(1)
    }, 2000)
  }
}
</script>

在原声JS中的使用方式：

   <input type="text">

      let input = document.querySelector('input')
      //防抖函数
      input.oninput = debounce(function () {
         console.log(111);
      }, 2000)
      /**
         * 这个 debounce 函数在给定的时间间隔内只允许你提供的回调函数执行一次，以此降低它的执行频率。
         * @method 防抖函数(500ms之后出结果，重复点击无效，如果重复点击，从点击的时刻,重新计算时间)
         * @params {Function} {handler} 事件处理函数
         * @params {Number} {delay} 恢复点击的毫秒数
      */

      const debounce = (handler, delay = 500) => {
         let timeout
         return function (...args) {
            // 获取函数的作用域及变量
            let that = this
            // 每次事件被触发，都会清楚当前timeout，然后重新计算时间
            timeout && clearTimeout(timeout)
            timeout = setTimeout(() => {
               handler.apply(that, args)
            }, delay);
         }
      }