再起航，我的学习笔记之JavaScript设计模式29(节流模式)

节流模式

概念介绍

节流模式(Throttler): 对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。

优化滚动事件

有的时候我们再为滚动条添加动画的时候，会发现滚动条不停的抖动，那么为什么会发生这种事情呢？我们简单的写个例子演示下

首先我们需要给页面一定的高度让其产生滚动条，然后我们监听页面在滚动的时候发生了什么。

首先我们编写个简单的方法在调用的时候像控制台输出，接着，我们调用滚动条的滚动事件，看看控制台里发生了什么

function scrollFn(){
    console.log(1)
}
window.onscroll=function(){
    scrollFn()
}

我们看到在我们滚动的时候控制台不停的在输出，我们的事件触发了很多次所以，在我们触发某些效果的时候会发生抖动等问题。那么我们如何解决这个问题呢？这个时候我们就可以用到节流模式。

首先我们需要创建一个节流器

//节流器
var throttle=function(){
    //获取第一个参数
	var clearParam=arguments[0],methods;
	//如果第一个参数是布尔类型那么第一个参数怎表示是否清除计时器
	if (typeof clearParam==='boolean') {
	    //第二个参数为函数
	    methods=arguments[1];
		//如果函数的计时器存在，则清除计时器
    	methods.throttleTimeId&&clearTimeout(methods.throttleTimeId);
	}else{

	    //如果第一个参数为函数
		methods=clearParam;
		//第二个参数为函数执行时的参数
		param=arguments[1];
		//清除执行函数计时器
		arguments.callee(true,methods);
		//为函数绑定计时器，延迟执行
		methods.throttleTimeId=setTimeout(function(){
		    //执行函数
			methods(param);
		}，300)
	}
}

好了我们现在调用试试

window.onscroll=function(){
    throttle(scrollFn)
}

好了我们现在看到，触发的事件是不是少了很多，这样我们就达到了节流的目的。

总结

由于JavaScript的单线程处理机制，导致Dom操作占用大量资源时会严重堵塞后面总要程序的执行，而我们的节流模式，则可以为我们优化这种情况，节流模式的核心思想是创建计时器，延迟程序的执行。

节流模式的有以下优点

1.程序能否执行时可控的。执行的某一时刻是否清除计时器来决定程序是否继续执行。

2.程序是异步的。由于计时器机制，使得程序脱离原程序而异步执行，因此不会影响后面的程序的正常执行。

也谢谢大家看到这里：）如果你觉得我的分享还可以请点击推荐，分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

欢迎转载，转载请注明作者，原文出处。