需求

在表单提交点击按钮时，需要防止用户重复提交表单。

实现

为Vue注册全局的方法，这里通过Vue.mixin来实现。

Vue.mixin({
            methods: {
                /*
                * @防抖动
                * @params fn fucntion 操作触发的函数
                * @params callback fucntion 防抖结束后触发的函数
                * @params timeout number 防抖最小的持续时间
                */
                /*
                * @用法
                *   <template>
                *        <button @click="()=>{$throttle(submit)}">提交表单</button>
                *   </template>
                *   *********
                *  methods:{
                *       submit(){
                *           return new Promise((res, rej) => {
                *              const form = { account:'senguo',password:'123456'}
                *              const promiseLogin = login(form)
                *              const promiseOtherThing = otherRequest()
                *              Promise.all([promiseLogin,promiseOtherThing]).finally(()=>{
                *                  // 无论结果如何最后都调用一次 res()
                *                  res()
                *              })
                *           }
                *       }
                *  }
                */
                $debounce(fn, callback, timeout = 1000 * 1) {
                    if (fn.disable === true) {
                        return console.log('防抖作用于：' + fn.name)
                    } else {
                        fn.disable = true
                        const timeoutPromise = new Promise(res => {
                            setTimeout(res, timeout)
                        })
                        Promise.all([fn(), timeoutPromise]).finally(() => {
                            fn.disable = false
                            callback && callback()
                        })
                    }
                }
        }
})