聊聊js中的函数节流 节流模式

      其实函数节流也用了很久了,今天简单聊聊它的实现原理,目的和使用方法.给初学者一点参考.

      函数节流的目的:  对高频率事件做做次数限制.比如onmousewheel,注意是对函数的执行次数进行的节流限制.因为高频率事件会频繁操作dom.开销很大.所以用它节省浏览器的性能开销.以实现性能优化的目的.

     函数节流的原理:  其实很简单,就是把需要执行的函数放在一个延时器里.让它延时执行.其实就是让它只执行最后一次.下面会详细说一下.

     函数节流的使用方法:

                 比如我们现在有一个需求,需要scrollTop值大于1000的时候,左边出现一个红色长方形.那代码应该这么写:

                      

document.body.onscroll = function() {
				if(document.documentElement.scrollTop >= 1000) {
					animate($nav, {opacity: 1}, 1000, function() {
					console.log(123);
				});
				}
			};

//  当然nav是默认不出现的.当scrolltop大于1000的时候.让nav出现;

      

          第一张图是图形刚刚出现的时候,我就停止滚轮滚动了.但就是这样,因为是高频率事件.还执行了32次.

        第二张图是图形出现之后,我又随便上下滚动了几次滚轮.函数竟然又疯狂的执行到了138次.  其实我们的需求是scrolltop大于1000的时候图形出现.也就是说图形出现之后,我们的目的就达到了.就不需要这个函数执行了.所以往后的100多次没有必要执行.这个函数只执行一次我们的目的就达到了.那现在问题来了,要怎么节流呢?

         先上代码吧:

           

                var timer = null;
			function show() {
				animate($nav, {opacity: 1}, 1000, function() {
					console.log(123);
				});
			}
			document.body.onscroll = function() {
				// 判断 scrollTop值如果大于1000 就让#nav出现
				if(document.documentElement.scrollTop >= 1000) {
					// 在高频率事件中 想要执行一段代码 必须使用节流器 
					// 因为这些代码只需要执行一次就可以 不必多次执行
					// 先清除延时器 
					clearTimeout(timer);
					// 再赋值
					timer = setTimeout(function() {
						show();
					}, 200);
				}
			}

        其实就是把我们需要执行的代码放到一个函数show里面,然后事件触发的时候,延时执行show这个函数. 我们设置的延时事件是200毫秒.也就是说当触发onscroll事件的时候,就延迟200ms执行show这个函数.假如在延时这200毫秒内又触发onscroll事件.那就清除延时器,再设一个新的延时器.如此往复.直到滚轮不再滚动的时候,这时候就没有新的延时器产生了.所以show函数在200毫秒后会顺利执行.  也就是说,如果你一直滚动滚轮  show函数是不执行的.你什么时候停止,什么时候执行最后一次.就是这样.