console
document.getElementById("nothing").onscroll = function(){
console.log("普通滚动");
}
var canRun = true;
document.getElementById("nothing").onscroll = function(){
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;}