1.防抖：
设置延迟器，每个一段时间执行一次，执行钱要清除定时器
防抖问题：用户不断在滚动时，防抖函数一直不执行
案例：也i按滚动每隔1秒钟执行函数
<style type="text/css">
div{
height: 300px;
}
</style>
</head>
<body>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<script type="text/javascript">
window.οnscrοll=debounce(showtop,1000)//连续不断地 动作
function showtop(){
//获取滚动条位置
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
console.log(scrollTop,'kkk')
}
function debounce(fn,delay){//fn被执行函数，delay延时
let timer=null
return function(){
if(timer){//如果timer存在的话，久清除timer
clearTimeout(timer)
}
timer= setTimeout(showtop,1000)
}
}
</script>
2.节流
<style type="text/css">
div{
height: 300px;
}
</style>
</head>
<body>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<div>qqqqqqqqqqqqqqqq</div>
<script type="text/javascript">
window.οnscrοll=throttle(showtop,1000)//连续不断地 动作
function showtop(){
//获取滚动条位置
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
console.log(scrollTop,'kkk')
}
function throttle(fn,delay){
let vaild =true;//设置的开关
return function(){
if(!vaild){//如果为false执行
return false
}
vaild=false;
setTimeout(()=>{
fn();//调用方法
vaild=true;//重新打开开关
},delay)
}
}
</script>
应用场景：
回到顶部
input框输入搜索提示
页面大小发生变化 onresize
对鼠标实时定位