函数去抖和函数节流

函数去抖

函数调用n秒后才会执行,如果函数在n秒内被调用的话则函数不执行,重新计算执行时间;

		// 函数去抖

		function deldou(method,delay){
			var time = null;
			return function(){
				var context = this,arg = arguments;
				clearTimeout(time);
				time = setTimeout(function(){
					method.apply(context,arg);
				},delay);
			}
		}

		// 测试
		function resizeli(){
			console.log(1);
		}
		window.onresize = deldou(resizeli,500);

  

 

函数节流

函数预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

// 函数节流
		function limit(method,duration){
			var begin = new Date();
			return function(){
				var context = this,args = arguments,cur = new Date();
				if(cur-begin >=duration){
					method.apply(context,args);
					begin = new Date();
				}
				
			}
		}

// 测试
		function resizeli(){
			console.log(1);
		}
		window.onresize = limit(resizeli,500);

  

需要注意的一点:函数的节流和函数的去抖都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段,并没有实质上减少事件的触发次数

详情参考:https://www.cnblogs.com/caizhenbo/p/6378202.html

 

posted @ 2018-10-25 19:57  春暖花未开  阅读(193)  评论(0编辑  收藏  举报