1.防抖
定义：对于短时间连续触发的事件，（如滚动事件）防抖的含义就是在某个时间期限内（如1000），事件处理函数只执行一次
应用场景：
<!DOCTYPE html>
<html>
<body>
<p>今天又是可可爱爱的一天</p>
<p id="demo">早上好呀</p>
<div>!!!!!</div>
<div>!!!!!</div>
<div>!!!!!</div>
<div>此处省略多个div!!!!!</div>
<script>
// 监听浏览器滚动事件，返回当前滚动条与顶部距离
function showTop() {
var scrollTop = document.body.scrollTop
|| document.documentElement.scrollTop;
console.log('滚动位置', scrollTop);
// 那么问题来了，浏览器执行这个函数的频率太高了，浏览器性能有限，于是引入防抖
}
window.onscroll = showTop;
</script>
</body>
</html>
借助闭包，引入防抖后代码为：
<!DOCTYPE html>
<html>
<body>
<p>如果小时小于18:00，显示“美好的一天！”：</p>
<p id="demo">晚安</p>
<div>!!!!!</div>
<div>!!!!!</div>
<div>!!!!!</div>
<div>!!!!!</div>
<div>此处省略多个div!!!!!</div>
<script>
// 此方法就实现了，停止滚动1s以后，才会打印出滚动条位置
function debounce(fn, delay) {
let timer = null; // 借助闭包
return function () {
if (timer) {
clearInterval(timer);
}
timer = setTimeout(fn, delay);
}
}
// 监听浏览器滚动事件，返回当前滚动条与顶部距离
function showTop() {
var scrollTop = document.body.scrollTop
|| document.documentElement.scrollTop;
console.log('滚动位置', scrollTop);
// 那么问题来了，浏览器执行这个函数的频率太高了，浏览器性能有限，于是引入防抖
}
window.onscroll = debounce(showTop, 1000);
</script>
</body>
</html>
2.节流
定义：
效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定时间期限内不在工作，直到过段时间才重新生效。
<!DOCTYPE html>
<html>
<body>
<p>如果小时小于18:00，显示“美好的一天！”：</p>
<p id="demo">晚安</p>
<div>!!!!!</div>
<div>!!!!!</div>
<div>!!!!!</div>
<div>!!!!!</div>
<div>此处省略多个div!!!!!</div>
<script>
// 监听浏览器滚动事件，返回当前滚动条与顶部距离
function showTop() {
var scrollTop = document.body.scrollTop
|| document.documentElement.scrollTop;
console.log('滚动位置', scrollTop);
}
function throttle(fn, delay) {
let valid = true;
return function () {
if (!valid) {
return false;
}
valid = false;
setTimeout(() => {
fn();
valid = true;
}, delay);
}
}
window.onscroll = throttle(showTop, 1000);
</script>
</body>
</html>
