防抖（debounce）
防抖的作用是：当用户多次触发回调函数时，只触发最后一次操作的，其余的全部忽略掉； 在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms。
- 如果在200ms内没有再次触发滚动事件，那么就执行函数
- 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
效果：如果短时间内大量触发同一事件，只会执行一次函数。从而可以通过闭包内检查定时器状态、清空定时器来实现重新计时。
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeOut(fn,delay)
}}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000)
节流（throttle）
但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在每个时间间隔之中执行一次函数呢？其实很简单：我们可以在闭包中设置一个控制阀门，也就是让函数执行时，在某个时间段内暂时失效，过了这段时间后再重新激活。而如果执行完一次整个函数，再去关闭整个阀门。通过这两个时间节点来控制阀门。
function throttle(fn,delay){
let executing = false //借助闭包
return function() {
if(executing) return;
setTimeout(()=>{
fn();
executing = false;
},1000);
executing = true;
}}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)
更多精彩文章敬请关注：
