1、函数防抖，在一定时间段不断触发，只会执行最后一次的函数
<body>
<button id='btn'>点击</button>
<script>
//函数防抖，在一定时间段不断触发，只会执行最后一次的函数
function debounce(fn) {
let timer = null;
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this,arguments[0]);
}, 1000);
}
}
let btn = document.querySelector('#btn');
btn.onclick = debounce(print)
function print(e) {
console.log(e)
}
</script>
</body>
2、函数节流，在一定时间段触发，就像去超市买东西，老板决定超市在星期一到星期天中打折一次，员工只能每个星期打折一次，不能多次打折
<body>
<button id='btn'>点击</button>
<script>
//函数节流，在一定时间段多次点击只触发一次
function throttle(fn) {
let flag = false;
return function () {
if (flag) {
return
}
flag = true
setTimeout(() => {
fn.call(this, arguments[0])
flag = false
}, 1000);
}
}
let btn = document.querySelector('#btn');
btn.addEventListener('click', throttle(print))
function print(e) {
console.log(e)
}
</script>
</body>