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

节流模式

概念介绍

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

优化滚动事件

有的时候我们再为滚动条添加动画的时候,会发现滚动条不停的抖动,那么为什么会发生这种事情呢?我们简单的写个例子演示下
首先我们需要给页面一定的高度让其产生滚动条,然后我们监听页面在滚动的时候发生了什么。

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

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

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

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

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

//节流器
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设计模式29(节流模式)

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

总结

由于JavaScript的单线程处理机制,导致Dom操作占用大量资源时会严重堵塞后面总要程序的执行,而我们的节流模式,则可以为我们优化这种情况,节流模式的核心思想是创建计时器,延迟程序的执行。
节流模式的有以下优点
1.程序能否执行时可控的。执行的某一时刻是否清除计时器来决定程序是否继续执行。
2.程序是异步的。由于计时器机制,使得程序脱离原程序而异步执行,因此不会影响后面的程序的正常执行。

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

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

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