SOURCE

console 命令行工具 X clear

                    
>
console
//普通滚动
document.getElementById("nothing").onscroll = function(){
  console.log("普通滚动");
}
//函数节流
var canRun = true;
document.getElementById("nothing").onscroll = function(){
  // 判断是否已空闲,如果在执行中,则直接return
  if(!canRun){
    return
  }
  canRun = false;
  setTimeout(function(){
    console.log("函数节流");
    canRun = true;
  },300);
}

//函数防抖
var timer = false;
document.getElementById("nothing").onscroll = function(){
  // 清除未执行的代码,重置回初始化状态
  clearTimeout(timer);
  var timer = setTimeout(function(){
    console.log("函数防抖");
  },300);
}
<div class="wrap">
		<div id="nothing" class="demo">
			普通滚动
			<div class="scroll"></div>
		</div>
		<div id="throttle" class="demo">
			函数节流
			<div class="scroll"></div>
		</div>
		<div id="debounce" class="demo">
			函数防抖
			<div class="scroll"></div>
		</div>
	</div>
.demo{width:200px;height:200px;border:1px solid red;overflow-y:scroll;margin-top:50px;}
	.scroll{height:5000px;}