<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="save-button">保存</button>
<script>
// 防抖：舍弃在规定时间外做的高频操作
// 闭包，使得timer为局部变量，不污染全局
function debounce(time) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
console.log('300ms after');
}, time);
}
}
// 小于300ms时间内的高频操作被舍弃
window.addEventListener('resize', debounce(300));
// 节流：在规定的时间内完成之后才能进行下一次操作
function throttle(fn, time) {
let active = true;
// 未保存前，允许点击保存操作
return function() {
if (active) {
// 保存之后，未完成相关操作之前不允许重新保存操作
active = false;
setTimeout(() => {
fn();
// 保存操作完成之后，允许后续点击操作
active = true;
}, time);
}
}
}
const saveButton$ = document.getElementById('save-button');
saveButton$.addEventListener('click', throttle(function() {
console.log('保存点击！');
}, 500))
</script>
</body>
</html>