防抖函数(debounce)：当一个函数连续触发，只执行最后一次。n秒内触发事件，函数只会执行一次，如果n秒内再次触发，则会重新计算再次执行函数的时间。
比喻：坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。
节流函数(throttle)：限制函数在一定时间内只执行一次。
比喻：乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>防抖函数、节流函数</title>
<style>
.btn,
.btn2,
.btn3 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="btn">点击测试</div>
<div class="btn2">节流点击</div>
<div class="btn3">防抖点击</div>
<script>
const btn = document.querySelector('.btn');
const btn2 = document.querySelector('.btn2');
const btn3 = document.querySelector('.btn3');
let func = (name, age) => {
console.log('按钮重复点击了', name, age);
};
btn.onclick = func;
// 节流函数
const throttle = (fn, wait = 300, ctx) => {
let lastCall = 0;
return (...args) => {
const _args = args;
return () => {
const now = Date.now();
if (now >= lastCall + wait) {
lastCall = now;
fn.apply(ctx, _args);
}
};
};
};
const afterThrottle = throttle(func, 2000);
btn2.onclick = afterThrottle('小黑不黑', '18');
// 防抖函数
const debounce = (fn, wait = 300, ctx) => {
let lastCall = 0;
return (...args) => {
const _args = args;
return () => {
const now = Date.now();
if (now >= lastCall + wait) {
fn.apply(ctx, _args);
}
lastCall = now;
};
};
};
const afterDebounce = debounce(func, 2000);
btn3.onclick = afterDebounce('小白', '100');
</script>
</body>
</html>
