自建博客文章链接：http://www.heblogs.cn/articleDetails/60f839acfcae932a86eeafcb
防抖是将多次执行变为最后一次执行
节流是将多次执行变为每隔一段时间执行
知识范围：前端性能优化
业务场景：日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）
防抖
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。以下为代码示例
/*
* 封装一个防抖函数
* fn [function] 需要防抖的函数
* delayTime[number] 毫秒，防抖期限值
*/
function debounce(fn,delayTime){
//初始化一个定时器
let timer = null;
return function() {
//如果当前计时存在且又触发了相同事件。那么关闭当前的计时
if(timer){
clearTimeout(timer); }
//否则打开定时器并设置延时时间既防抖期限值
timer = setTimeout(fn,delayTime);
}
}
//滚动测试函数
function showTop() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
//使用封装好的防抖函数
window.onscroll = debounce(showTop,200);
节流
如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。
function throttle(fn,delayTime){
//初始化一个valid开关
let valid = true;
return function() {
//如果valid为false 直接返回
if(!valid){
return false }
//如果valid为true 延时器打开
valid = false
setTimeout(() => {
fn();
valid = true;
}, delayTime)
}
}
//滚动测试函数
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
//使用封装好的节流函数
window.onscroll = throttle(showTop,200)