防抖和节流解决方案

防抖的概念

在一个事件触发之后,设置定时器,定时器给的时间是n,若是在n秒之内该事件再次发生,则定时器会被清零,重新开始计时,否则执行该事件的函数.(提高性能)下面直接上代码.

防抖之非立即执行函数(普通函数)

	// fun 需要防抖的函数
	// time 时间
	function antiShake(fun, time) {
			let timer = null;
			return function() {
			    clearTimeout(timer);
			    timer = setTimeout(function() {
				fun.apply(this,arguments);
	   }, time);
	 }
	}

防抖之立即执行函数

//fun 需要防抖的立即执行函数
// time 时间
function antiShake(fun, time) {
	let timer = null;
	let flag = true;
	return function() {
		clearTimeout(timer);
		if(flag) {
			fun.apply(this,arguments);
			flag = flase;
				}
		timer = setTimeout(function() {
			flag = true;
		}, time);
	}
}

节流的概念

一个事件在n秒内被多次触发，但绑定的函数在期间只会执行一次(提高性能)

节流之非立即执行函数

	// fun 需要节流的函数
	// time 时间 
	function throttle (fun, time) {
		let flag = true;
		return function() {
			if (flag) {
			flag = false;
			setTimeout(function() {
				fun.apply(this, arguments);
				flag = true;
				}, time);
			}
		}
	}

节流之立即执行函数

	// fun 函数
	// time 时间
	function throttle (fun, time) {
		let flag = true;
		return function() {
		if (flag) {
			flag = false;
			fun.apply(this, arguments);
			setTimeout(function() {
			flag = true;
			}, time);
			}
		}	
	}

防抖动和节流抖是为了提高性能!