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;}