防抖节流(整屏翻动为例)

防抖

持续触发事件时，当一定时间内没有再次触发时间，执行事件处理函数，若在设定时间内再次触发时间，那么延时，直到满足设定时间，即再次执行事件处理函数

节流

持续触发事件时，在一定时间内只调用一次事件处理函数

两者的区别:
防抖是指在事件处理函数执行过程中，不能再次触发，事件处理函数执行完毕之后，才能触发下次事件，而节流就是在一定时间内触发一次事件

eg
在下述代码中实现了防抖，设置标志量 flag ,仅当 flag 的值为真时，才能触发滚动事件

//平移函数
		function animate(element,distance){
		
//distance 表示 element 的当前位置

			clearInterval(element.timer);
			
			element.timer = setInterval(function(){
				
				var present=element.offsetTop;
				
				var movement = 10;
				
				movement = present < distance ? movement : -movement;
				
				present += movement;
				
				if(Math.abs(present-distance)>Math.abs(movement)){
				
//函数平移过程中，标志量 flag 值为 false
					
					element.style.top = present+'px';
					
					flag = false;
				}
				
				else{
					
				    clearInterval(element.timer);
				    
//函数平移完成，flag 的值为 true
					
					element.style.top=distance+'px';
					
					flag = true;
				}
				
			},80);
		 }

//添加滚动事件
play.onmousewheel = function() {
        clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
		var e = e || window.event;
			
			if(flag || flag==undefined){
				if(e.wheelDelta>0){
						if(count == 1){
							count = 3;
							play.style.top = -4*parseInt(window.innerHeight) + 'px';
							animate(play,-parseInt(window.innerHeight)*3);
						}
						else{
							count--;
							animate(play,-parseInt(window.innerHeight)*count);
						}
				}
				else if(e.wheelDelta<0){
					
						if(count == 3){
							count = 1;
							play.style.top = 0 + 'px';
							animate(play,-parseInt(document.documentElement.clientHeight));
						}
						else{
							count++;
							animate(play,-parseInt(document.documentElement.clientHeight)*count);
						}
				}
			}
        }

防抖节流参考文章