JavaScript的防抖和节流性能优化

概念

什么是防抖

触发事件后在N秒内函数值能触发一次，如果在N秒内有触发了事件，则会重新计算函数执行时间。

防抖函数实现

		function debounce(fun ,wait){
			let timer =null;
			return function(){
				//获取传参
				var args =arguments;
				timer && clearTimeout(timer);
				timer = setTimeout(() =>{
					//add  you  code
					//fn.apply(this, args);
				},wait);
			}
		}

优化函数

			function debounce(fun ,wait){
							var timer =null;
							return function(){
								//获取传参
								var args =arguments;
								//如timer为null,则先执行函数一次
								var flag =! timer;
								//根据flag状态,执行函数
								if(flag){
									console.log("最初执行");
									fun.apply(this,args)
								}
								timer && clearTimeout(timer);
								timer = setTimeout(() =>{
									fun.apply(this,args)
								},wait);
							}
						}

什么是节流

连续触发事件，在这段时间内只执行一次函数

节流函数实现1

			function throttle(fn, wait) {
				let timer = null;
				return function() {
					if (!timer) {
						timer = setTimeout(() => {
							timer = null;
							//add  you  code
						    //fn.apply(this, args);
						}, wait);
					}
				}
			}

节流函数实现2

			function throttle2(fn, wait) {
				let flag = false;
				return function() {
					if(flag){
						return ;
					}
					flag =true;
					setTimeout(() => {
							flag = false;
						  	//add  you  code
						   //fn.apply(this, args);
						}, wait);
				}
			}

节流函数优化

使用时间戳

	function optimization_throttle(fn, wait) {
				let last = 0;
				return function() {
					var args = arguments;
					var now = Date.now();
					if (now - last > wait) {
						//add  you  code
						//fn.apply(this, args);
						last = now;
					}
				}
			}