JS之防抖与节流

首先，我们给滚动事件添加一个函数，让他打印当前滚动条的位置，功能就是监听滚动条距离顶部的位置。

function showTop(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll  = showTop

但此时我们发现，我只是滚动了一下，结果打印了好多个值，如下图所示，该事件多次被触发，频率之高容易使得浏览器崩溃

所以我们希望这个事件，触发的少一些
比如，当我滑动滚动条的时候，多次触发该事件，我希望最后一次滑动停止之后，两秒内无继续滑动，再打印出当前滚轮位置。思路如下

防抖

• 如果在2s内没有再次触发滚动事件，那么就执行函数，打印该值
• 如果在2s内再次触发滚动事件，那么当前的计时取消，重新开始计时

			//防抖函数
			function debounce(fn,delay){
				let timer=null;//创建，timer保存滚动事件，计时
				return function(){
					if(timer){//定时器存在则清除上一个
						clearTimeout(timer);//有操作时，但不足2s，重新计时
					}
					//设置定时器
					timer=setTimeout(fn,delay);//无操作时，执行延迟函数，2S后打印结果
				}
			}

			function showTop(){
			    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			　　console.log('滚动条位置：' + scrollTop);
			}
			window.onscroll  = debounce(showTop,2000)//为滚动条事件绑定防抖函数

onscroll事件触发以后，debounce就会执行，2秒内无触发事件，则的bounce里面的延迟函数顺利执行。 若一直有触发事件，函数由上到下执行，延迟函数被清除。
核心思想：有定时器都清空，执行一次函数

节流

节流，触发N秒这个事件，打印结果只每2s打印一次。
防抖，触发N秒，最后停止触发2s后打印一次结果，不足2s不打印。

节流函数如下

		//节流函数
			function throttle(fn,delay){
				let timer=null;
				return function(){
					that=this;
					args=arguments;
					if(!timer){//没有定时器时
						timer=setTimeout(//就创建定时器
						function(){
							fn.apply(that,args);//要执行的函数
							timer=null;//将定时器清空
						},delay)
					}
				}
			}
			function showTop(){
			    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			　　console.log('滚动条位置：' + scrollTop);
			}
			
			window.onscroll  = throttle(showTop,2000);

滚动事件触发时，调用throttle函数，定时器设定为null，没有定时器就创建定时器，执行延迟函数，两秒后执行一次打印，然后将定时器清空，如果定时器存在，就不执行打印。持续触发时……
核心思想：没有定时器就创建，执行函数以后再清空。有的话就不管了。也不会触发函数
参考资料 > https://www.cnblogs.com/momo798/p/9177767.html