1. 防抖：对于短时间内连续触发的事件（例如监听浏览器页面滚动），防抖的含义就是让某段时间内，事件处理函数值执行一次。 `
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)
缺点，如果拥挤在限定事件内，不断的触发滚动事件，只要不停止触发，理论上就永远不会执行success函数
2. 节流：如果在短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定事件期限内不再工作，直至过了这段时间才重新生效
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间，执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
/* 请注意，节流函数并不止上面这种实现方案,
例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
*/
// 以下照旧
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)
3. 应用场景
1）搜素框 input 事件，例如要支持输入实时搜素可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值，就当做用户输入完成，然后开始搜素。
2）页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）
