设计模式(二十一) 节流模式

//对一些复杂的操作，只执行最后一次，提高性能
//比如监听滚轮事件或窗口变化事件时，根据情况只允许最后一次
var t = function(){
	var isClear = arguments[0],
		fn;
	//若第一个参数是布尔值则第一个参数表示是否清除定时器
	if(typeof isClear === 'boolean'){
		fn = argument[1];	//第2个参数为函数
		fn._tID && clearTimeout(fn._tID);	//函数的计时句柄存在，则清除该计时器
	}else{
		fn = isClear;	//第一个参数为函数
		param = arguments[1];	//第二个参数为函数执行时的参数
		//为执行时的参数适配默认值
		var p = extend({
			context: null,	//执行函数执行时的作用域
			args: [],		//执行函数执行时的相关参数（IE下要为数组）
			time: 300		//执行函数执行的时间
		}, param);
		//清除执行函数计时器的句柄
		arguments.callee(true, fn);
		//为函数绑定计时器句柄，延迟执行
		fn._tID = setTimeout(function(){
			fn.apply(p.context, p.args);
		}, p.time)
	}
}
//节流器做两件事，一是清除将要执行的函数，此时传递两个参数（是否清除，执行函数），若第一个为true，表示要清除，则判断第二个参数有没有计数器句柄，有则清除定时器；二是延迟函数执行，传递两个参数（执行函数，相关参数），并为执行函数绑定计数器句柄。
function a(){  }
$(window).on('scroll', function(){
	t(a);
})


//图片延迟加载
//图片过多可能影响css，js等加载，而且如果页面长图片多时，当用户一开始就把页面拉到最底下，而图片还是从上面开始加载，影响用户体验。
function ll(id){	//延迟加载图片的容器id
	//根据id获取容器
	//……
	this.imgs = this.getImgs();	//缓存图片
	this.init();	//执行逻辑
}
ll.prototype = {
	init(){
		this.updata();	//加载当前视图图片
		this.bindEvent();	//绑定事件
	},
	getImgs: function(){  }, //获取图片元素，放入一个数组
	//加载图片，若全部图片都加载完则return，否则调用shouldShow判断，若图片在可视区域内则加载（引入src，相关数据可存在data-src中），加载完清除数组中的该元素
	updata: function(){  },
	shouldShow: function(){  }, 	//判断图片是否在可视区域
	pageY: function(){  },	//判断元素页面中的纵坐标位置
	on: function(){  },	//自定义绑定事件
	bindEvent: function(){ }	//为窗口监听resize和scroll事件，并引入节流器，在每次事件结束后运行updata
}

//另外比如多次向后台重复请求，也可使用节流器。