Vue2 封装全局防抖节流函数

1、 封装utils.js

let timeout = null
let timer, flag
/**
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {params} params 函数传参
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */
function debounce(func, params, wait = 500, immediate = false) {
    // 清除定时器
    if (timeout !== null) clearTimeout(timeout)
    // 立即执行，此类情况一般用不到
    if (immediate) {
        var callNow = !timeout
        timeout = setTimeout(function () {
            timeout = null
        }, wait)
        if (callNow) typeof func === 'function' && func(params)
    } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function () {
            typeof func === 'function' && func(params)
        }, wait)
    }
}
/**
 * 节流原理：在一定时间内，只能触发一次
 * 
 * @param {Function} func 要执行的回调函数 
  * @param {params} params 函数传参
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle(func, params, wait = 500, immediate = true,) {
    if (immediate) {
        if (!flag) {
            flag = true
            // 如果是立即执行，则在wait毫秒内开始时执行
            typeof func === 'function' && func(params)
            timer = setTimeout(() => {
                flag = false
            }, wait)
        }

    } else {
        if (!flag) {
            flag = true
            // 如果是非立即执行，则在wait毫秒内的结束处执行
            timer = setTimeout(() => {
                flag = false
                typeof func === 'function' && func(params)
            }, wait)
        }
    }
}
export default {
    install(Vue) {
        Vue.prototype.$debounce = debounce
        Vue.prototype.$throttle = throttle
    }
}

2、 main.js 注册

import utils from '@/utils/instruction'

//全局防抖函数
Vue.use(utils)

3、 组件调用

//fun 控制函数
//params传递参数
//时间
//第四个布尔参数标识是否立即执行
<button @click="$throttle(fun, params,1000,false)" type="primary"><a-icon type="check-circle" />保存
  </button>

注：节流防抖函数使用的为uview官方api代码，稍作传参修改