节流和防抖函数 ---- 阻止事件持续触发的过程中那么频繁地去执行函数。

防抖函数（debounce）

就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 这是debounce的基本思想
对防抖进行了封装

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 */
export function debounce(func,wait) {
	//触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
	let timeout,context
	return function (...args) {
		context = this;
        		 //let args = arguments;
		//如果延时不存在，重新设定延时
		if(timeout) clearTimeout(timeout)
		timeout = setTimeout(() => {
			func.apply(context,args)
		},wait);
	}	
}
//let context = this;
//let args = arguments;
//应用 引用
methods:{
            saveposter:debounce(() =>{
            }, 320)
}

进阶

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 * @立即执行----触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
 */
//immediate  触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。
export function debounce(func,wait,immediate) {
	let timeout,context;
	return function(...args){
		if(timeout) clearTimeout (timeout);
		if(immediate) {
			var callNow = !timeout;
			timeout = setTimeout(() => {
				timeout = null;
			},wait)
			if (callNow) func.apply(context,args)
		} else { 
			timeout = setTimeout(function(){
				func.apply(context,args)
			},wait);
		}
	}
}

防抖函数的代码使用这两行代码来获取 this 和 参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。
参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

节流函数（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率
节流的策略是，固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。

/*
 * @desc 节流函数--定时器版
 * @param func 函数
 * @param delay 延迟执行毫秒数
*/
export function throttle(func,delay){
	let timeout = null;
	return function(){
		let context = this;
		let args = arguments;
		if(!timeout){
			timeout = setTimeout(() => {
				func.apply(context,args)
			},delay)
		}
	}
}

进阶

/**
 * @desc 函数节流
 * @param func 函数
 * @param delay延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, delay,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();
            if (now - previous > delay) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                },delay)
            }
        }
    }
}

更多内容

求关注，微信公众号-前端程序猿Pro，不至于前端~