节流和防抖

 防抖（debouce）：隔一段时间触发，在规定的时间内，不管点击了多少次，最终只执行一次 

// 防抖
let timeout;

function debounce(fn, wait = 500, immediate = false) {
    // 清除定时器
    if (timeout !== null) clearTimeout(timeout);
    // 立即执行，此类情况一般用不到
    if (immediate) {
        var callNow = !timeout;
        timeout = setTimeout(function() {
            timeout = null;
        }, wait);
        if (callNow) typeof fn === 'function' && fn();
    } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行fn回调方法
        timeout = setTimeout(function() {
            typeof fn === 'function' && fn();
        }, wait);
    }
}

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

// 节流

let timer, flag;

function throttle(fn, wait = 500, immediate = true) {
    if (immediate) {
        if (!flag) {
            flag = true;
            // 如果是立即执行，则在wait毫秒内开始时执行
            typeof fn === 'function' && fn();
            timer = setTimeout(() => {
                flag = false;
            }, wait);
        }
    } else {
        if (!flag) {
            flag = true
                // 如果是非立即执行，则在wait毫秒内的结束处执行
            timer = setTimeout(() => {
                flag = false
                typeof fn === 'function' && fn();
            }, wait);
        }

    }
};

在组件中引入

import { throttle, debounce } from '@/utils/throttleAndDebounce'

Fun(){
	this.$debounce(this.submit,300)  // 参数1的函数不用带()
}