文享日志

Underscore库-节流函数

JavaScript Underscore

发表于2017年09月20日19:48:19

0条评论 270次阅读

原理是判断当前是否设置了setTimeout,是的话不执行,不是的话,设置一个。在setTimeout参数的目标函数,既起到初始化数据的目的,又执行了func函数。

//节流函数,画图看看更清晰
//注意remaining,和timeout

	_.throttle = function(func, wait, options){
		var context, args, result;
		var timeout = null;
		var previous = 0;
		if(!options) options = {};
		
		var later = function(){
			previous = options.leading === false?0:_.now();
			timeout = null;
			result = func.apply(context, args);
			if(!timeout) context = args = null;
		}
		
		return function(){
			//当前时间
			var now = _.now();
			if(!previous && options.leading === false)
				previous = now;
			//判断当前函数执行与上一次函数执行时间差与wait的关系
			var remaining = wait - (now - previous);
			// console.log(remaining);
			//这里注意remaining在下面setTimeout函数中做参数
			context = this;
			args = arguments;
			//刚调用函数时,执行if条件里的。
			//执行传入的函数,清除定时器(若有),作用域,参数置空
			if(remaining <= 0 || remaining > wait){
				if(timeout){
					clearTimeout(timeout);
					timeout = null;
				}
				previous = now;
				result = func.apply(context, args);
				if(!timeout) context = args = null;
				//undefined!== flase为true
			}else if(!timeout && options.trailing !== false){
				//当当前存在计时器的时候,就阻止再设置计时器。timeout为阻止条件
				timeout = setTimeout(later, remaining);
			}
			return result;
		};
	};

console.log("start")
var f = function(){console.log("f run")};
var tf = _.throttle(f,3000);
setInterval(function(){
        console.log("tf run")
        tf();
},1000);


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广